What is TypeScript?

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 package
• npm 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.

• Quick Start
• Documentation
• Source Code