A Brief Introduction to TypeScript

Harry C.
5 min readNov 25, 2018

--

Well, that begs the question. What is TypeScript? According to Wikipedia, TypeScript is a strict syntactical superset of JavaScript, and adds optional static typing to the language. Otherwise known in layman’s term as …

TypeScript adds “types”

Why TypeScript?

Unlike other programming languages, JavaScript variable declarations do not require a type declaration. The variable’s type will be implicitly assigned based on the value that’s assigned to it. However, that type will change if a value with a different type is passed in.

Variable type changing as a new value with a different type is assigned (JS)

This flexibility allows JavaScript programmers to build applications at a blazing fast pace. However, there is a cost that comes with this speed in the form of bugs as the application scales and gets larger.

Applications are not written by one person nor one team. The codebase for a real world application generally has tens if not hundreds of different programmers’ code in it. Many of whom may have moved on while many others are completely new to it. This is bound to cause application breaking bugs that would be the nightmare of any developer. Due to JavaScript’s flexibility regarding typing, newer programmers will not only have to figure out the new codebase that’s being introduced to them, but also figure out the type of its variables and the potential of it changing throughout the course of its lifetime. Why add more difficulty for that new programmer?

TypeScript solves this issue. By explicitly stating a variable type, TypeScript prevents many potential bugs such as TYPE errors. It also allows anyone looking at the codebase for the first time to know what gets passed into a certain function, thus reducing the need to scour the application and look for the relevant code to understand it.

An analogy between TypeScript and JavaScript would be the tortoise and the hare. TypeScript’s approach is more of a slow and steady wins the race. Contrasting it is JavaScript’s approach of moving fast and breaking things, literally.

Now Let’s Code

Variable declarations in TypeScript follows this format:

TypeScript Variable Declaration

Easy enough to understand. Let’s jump into some examples.

Examples of Explicit Type Declaration

In all of these cases, the variable can be reassigned as it is declared with the let keyword. However if you reassign a value with a different type to it, your IDE will scream at you. This is, of course, assuming you’re using a IDE that has TypeScript support as most common ones do (VSC, Atom, WebStorm, etc…)

A variable cannot be assigned nor reassigned a value that’s not of the type that’s been declared

Implicit Type Declaration

Along with explicit definition of a variable’s type, TypeScript also allows for implicit definition as well. A variable will receive the type of the value that’s passed in. However, unlike JavaScript’s flexibility in which a value of any type can be reassigned to that variable, TypeScript will only allow a value of the same type.

A variable type that’s been implicitly declared will hold on to that type. Values of a different type cannot be reassigned to it.
101 is the same type as 100 so TypeScript will allow the reassignment

Arrays in TypeScript

Array declaration format in TypeScript
Array declaration example

If an array is defined with a type, all elements within that array must be of that type. Your IDE will scream at you when the array is modified (push, unshift, splice, etc…) and passed in a value that’s not of the declared type.

Cannot modify an typed array with a value of a different type

Functions in TypeScript

TypeScript allows for the explicit definition of parameter types as well as the return value of a function. As stated in the “Why TypeScript?” section, this is extremely helpful for programmers being introduced to a new codebase. By explicitly telling the machine as well as the human what type of values a certain function accepts, the programmer will have an easier time understanding the code and less bugs will be introduced into the application. Ideally, no bugs relating to types should exist if TypeScript is implemented properly.

Format for ES5 function declaration
Example with real values being passed it.

Installation and Setup

After finish writing a TypeScript project, it needs to be transpiled into JavaScript. So of course, you need to have a transpiler installed. If you’re using npm then you already know the drill. The transpiler can be installed globally on your machine or in a specific root directory in your node_modules folder.

npm install -g typescript

To transpile a .ts file, you can enter the command, ‘tsc<filename.ts>’, in your terminal and a transpiled .js file will appear in the same directory. If you want to transpile more than one files, you will need to setup a tsconfig.json file and configure it to do so. More on this can be found on VSC’s TypeScript documentation page. I highly recommend reading that if you are setting up a tsconfig.json file from scratch as it’s well documented and easy to follow.

Conclusion

I left out a few important parts regarding TypeScript that definitely warrants further study. I will be diving further into TypeScript as it is an exciting technology to learn. I will leave it up to you to decide whether or not you should do the same. Hopefully, I’ve persuaded you into the TypeScript gospel.

Cheers 🎉 🎉 🎉

--

--