Table of contents
TypeScript Overview
So as you are most likely aware, JavaScript is expanding its footprint everyday. It is both overwhelming and amazing what you can do with the language nowadays.
However, as more large-scale projects start to use JavaScript, the process of making the code easier to write and more maintainable becomes more and more difficult.
This is a problem Microsoft recognized early on and they came up with a solution: TypeScript The first version was released on October 1st, 2012.
JavaScript vs TypeScript

Okay so now that we have a general sense of what TypeScript is, let’s play a quick game of Where’s Waldo.
In the above screenshot, you can spot the differences between JavaScript
& TypeScript
in this very simple multiplication program that just prints out the product of two numbers I’ve pre-defined.
What are those differences though??
They’re types!
So JavaScript
has dynamic typing in that a variable declared as a number can be turned into a string where as TypeScript
has static typing meaning you declare beforehand what type of value the variable will hold and it doesn’t change.
In that multiplication.ts
file, I’m declaring all these variables to be numbers so they cannot be changed to something else.
In essence, TypeScript is trying to help JavaScript reach new heights and become very scalable. It can be highlighted by the following features:
- free and open-source programming language developed and maintained by Microsoft
- strict syntactical super-set of JavaScript that compiles to plain JavaScript
- eases development of large scale applications written in JavaScript
- extends JavaScript by adding static types, classes, modules, interfaces and generics
? FUN FACT TypeScript turned 7 years old on October 1st, 2019.
Version
Latest stable version available is TypeScript 3.7 (as of early 2020).
How to Install TypeScript

To get started yourself, the two things you will need are the TypeScript compiler and an editor that supports TypeScript.
In the above screenshot, I’m installing both the compiler and TSLint (which is similar to ESLint) using npm
in Visual Studio Code’s integrated terminal.
Installing TypeScript
This command will install the TypeScript package as a dependency in your project using npm
which is a popular package manager.
npm i typescript
To Note There are several options that npm
provides depending on where you want TypeScript installed.
npm i -g typescript
to globally install the TypeScript packagenpm i -D typescript
to install the TypeScript package as a dev dependency
Compiling a single file down to JavaScript
tsc multiplication.ts
To Note You can configure this TypeScript compilation process as a custom npm script in your package.json
.
Configuration Options
touch tsconfig.json
There’s also the option to create a tsconfig.json
file that specifies the root files and compiler options.
Within your tsconfig.json
file, for example, you could specify that you want TypeScript to compile down to ES5 instead of ES6.
Quick Example

In the screenshot above, you can see two files – multiplication.js
and multiplication.ts
.
This program just prints out the product of two numbers I’ve pre-defined.
multiplication.ts
let a: number = 10;
let b: number = 2;
function showProduct(first: number, second: number): void {
console.info("Mathematical! The result is " + first * second + ".");
}
showProduct(a, b);
// Mathematical! The result is 20.
Once I’ve finished creating multiplication.ts
, I can compile it down to JavaScript using the tsc
command which stands for TypeScript compile.
multiplication.js
var a = 10;
var b = 2;
function showProduct(first, second) {
console.info("Mathematical! The result is " + first * second + ".");
}
showProduct(a, b);
// Mathematical! The result is 20.
Bam – we just successfully compiled TypeScript to JavaScript!
TSLint

A linter is a tool that detects and flags errors in programming languages, including stylistic errors.
For TypeScript, TSLint is the most popular linter option.
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.
It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.
Installing TSLint
This command will globally install the TSLint
package using npm
, a popular package manager.
npm i -g tslint
Playground

If you want to try out TypeScript without installing it, visit the TypeScript Playground.
The Playground has built-in auto completion and the ability to directly see the emitted JavaScript.
Other Resources
To learn more about installation, see the Installation Appendix.
In case you need just a type checker and don’t want to compile your program, read about Flux.