Why use TypeScript?

JavaScript is not a strictly typed language. This means that when you declare a variable, you don’t have to also define the type — number, string, boolean etc. — of the values that it’ll hold. It’s perfectly legitimate in JavaScript for a variable to be reassigned a value of a different type to the one it was assigned initially. Here is an example of this practice:

let name = ‘Philip Marlowe’;
name = 14;

This makes writing JavaScript faster and more flexible, but it can also lead to more errors. Let’s say the variable reassignment above is a mistake, and later on in your code you have this line:

let nameCapitalised = name.toUpperCase();

In strictly typed languages like Java and C#, this mistake would be caught in your editor at the point when you tried to reassign name, which you would have defined as a string, to a numeric value. In JavaScript, an error would only be thrown when you tried to run the code.

This is where TypeScript comes in. It gives us the ability to add static type definitions to our JavaScript variables and check our code for type errors in the editor, before it runs. By doing this, it gives us more security by reducing the potential for errors to crop up in our production code. TypeScript is a superset of JavaScript, which means that it includes all JavaScript’s features, along with its own type checking extensions. All valid JavaScript is TypeScript code. You can download TypeScript as an npm package and set up a simple development workflow in which you write your code in TypeScript files which will be type checked in your editor. The TypeScript files will then be compiled into JavaScript for runtime. It’s flexible and configurable; you can adjust how strict you want to type checking to be.

Let’s take a look at how you can add type definitions in TypeScript.

let name: string = ‘Philip Marlowe’;

Because you’ve defined name as a string, TypeScript will give you an error message in your editor if you try to reassign the variable to a non-string value. The same thing will happen if you try to carry out a ‘non-stringy’ operation on the variable. For example, this will result in an error message:

let someNumber = Math.floor(name);

Now let’s look at a slightly more complex example. This how you add type definitions to an object:

interface Book {
  author: string,
  title: string,
  pageCount: number,
  read: boolean
}
let book: Book = {
  author: ‘Raymond Chandler’,
  title: ‘The Long Goodbye’,
  pageCount: 291,
  read: true
};

The properties of the book variable are now protected by type definitions.

My first experience of using TypeScript was when I migrated a JavaScript file from an existing project over to it. I found myself enjoying the process because it made me think about my code in more depth, it made me feel that it had more structure, and it gave me a greater sense of security. It’s because of these benefits that I plan to use it more in the future.

I hope you enjoyed reading the article! If you have any questions, suggestions, or corrections, feel free to get in touch with me.

Email: rossmorran@hotmail.co.uk
Twitter: @RossMorran