What is TypeScript? | Frances Coronel

TypeScript Overview
JavaScript vs TypeScript
- What are those differences though??
Version
How to Install TypeScript
TSLint
- Installing TSLint
Playground
- Other Resources

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!