TypeScript - Taking JavaScript One Step Further

Searching for a job as a Software Engineer, I began to notice trends in the languages companies were using. Things like AWS, GraphQL, Apollo, Python were popping up a lot. The other language I noticed frequently was TypeScript. After researching it a bit and realizing it wasn’t too far from JavaScript which I already knew, I decided to purchase an introductory course and learn some of the basics.

First, why use TypeScript at all if it just compiles to a JS file in the end anyway? There are definitely advantages to using TypeScript, the biggest being the fact that it uses static typing. This means variable types are known at compile time and the programmer must expressly indicate types. This helps maintain the code and reduces the number of bugs happening since there is no assumption about what type a variable needs to be or what type a function will return. Using TypeScript also allows for a better programming experience, with your IDE better understanding your code and added features such as code-completion and refactoring. Finally, popular frameworks like Angular rely on TypeScript so it’s good to know!

I wanted to start by going over some of the very basic functionality of TypeScript, but would highly recommend a beginners course and digging through the documentation to get an even better glimpse into the language.

First, you need to know how to compile your TS into a JS file. I use Visual Studio for my IDE, but other IDE’s may be slightly different. Visual Studio allows you to compile your code with a simple command in the terminal.

tsc filename.ts

Pretty simple! This will create a separate file named filename.js and have all of your TS code compiled into JS so browsers can read it. Before you do this, you do need to create a tsconfig.json file to specify all of the compiling options. I highly recommend looking into all the options, but for my simple app I used the following configuration, compiling my JS file using ES6:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es6", "DOM"]
  }
}

When setting variables in TS we need to specify the type. We do this by adding the type after the variable name. This specifies our variable, variableName, is a number, so when we use the variable in equations, it checks to make sure the equation needs a number. If it needs a string instead of a number, we will get an error in TS telling us our variableName does not match the type needed for the function. This is a simple example, but extremely helpful on a larger scale.

filename.ts
let variableName: number = 5
let myArray: string[] = ["food", "beach", "running"]
let mySecondArray: [string, boolean, number] = ["Andrew", true, 6]
filename.js
//This gets compiled in our JS file
let variableName = 5
let myArray = ["food", "beach", "running"]
let mySecondArray = ["Andrew, true, 6]

We also need to specify types in functions for both the arguments and what will be returned. The example below specifies the sayNumber function must take in a number and will return a number. If we try to pass a string into the function TS will give us an error telling us the type doesn’t match, giving us a clue to errors in our code. If you want a code to accept a variable that can be of any type, use ‘val: any’. Similarly if you want the return to be any type you use ‘function sayNumber() : void’ for the return type.

filename.ts
function sayNumber(val: number) : number {
  return val;
}
filename.js
//this gets compiled
function sayNumber(val) {
  return val
}

These are not complex examples, but you can see how TS helps clarify our code and checks in advance for possible errors we might have which is incredibly helpful. One of my favorite things I learned about using TS was the ‘enum’ keyword. Enums let us define a set of named constants using either numbers or strings. The example I will walk through uses numbers.

enum DoorStats {
  Open = 1, 
  Closed, 
  Ajar
}

This is a numeric enum where Open is initialized to 1. Everything else gets auto numerated so Closed would initialize to 2 and Ajar would initialize to 3. This results in the following JavaScript code (obviously a lot more than what we wrote).

(function (DoorStats) {
  DoorStats[DoorStats["Open"] = 0] = "Open";
  DoorStats[DoorStats["Closed"] = 1] = "Closed";
  DoorStats[DoorStats["Ajar"] = 2] = "Ajar";
})(DoorStats || (DoorStats = {}));

This allows us to use the enum in both directions. To avoid setting a lot of objects in your JS code, you can use enums to quickly define sets of constants. You can see below the final object we get in JS once we compile. Pretty sweet!

console.log(DoorStats.Open)
// 0
console.log(DoorStats[0])
//"Open"
console.log(DoorStats)
// {
  '0': 'Open',
  '1': 'Closed',
  '2': 'Ajar',
  Open: 0,
  Closed: 1,
  Ajar: 2
}

Setting a variable using an enum is simple as well. We just set the type for our variable to the name of the enum, then we know our variable is always one of our enum options.

const door: DoorStats = DoorStats.Open;

I really enjoyed learning some of the reasoning behind using TS and some of the basic syntax which I’m sure will come in handy in my future job. Looking forward to diving a little deeper, but this was a great place to start for me!