What is Typescript?

According to Maximilian Schwarzmüller, "Typescript is a Javascript superset" Typescript is not completely a new language, but Typescript always compiles to Javascript. My analogy maybe is like body(JS) + armor(TS). Typescript makes Javascript is stronger because Javascript is a loosely typed language, and Typescript is a strongly typed language. I will explain what's the difference between loosely typed language and strongly typed language.

Javascript is a loosely typed language because we have the flexibility to assign without declaring a type of variable.

Try to run this snippet below into our browser console.

function sum(a, b){
  return a + b
}

const firstNumber = '2';
const secondNumber = 5;

const total = sum(firstNumber, secondNumber)
console.log(total)

Yes, of course. The answer is 25. this is one of the problems of javascript is a loosely typed language.

We can check what's the type of parameters, but we must add more chunks of codes there.

function sum(a, b){
  if(typeof a === 'number' && typeof b === 'number'){
    return a + b;
  } else {
    return +a + +b;
  }
}

const firstNumber = '2';
const secondNumber = 5;

const total = sum(firstNumber, secondNumber)
console.log(total)

That's why Microsoft develops Typescript. Here is the code of how Typescript solves the problem.

function sum(a: number, b: number) {
  return a + b;
}

const firstNumber = 2;
const secondNumber = 5;

const total = sum(firstNumber, secondNumber);
console.log(total);

We just need to specify the type of the parameter.

Installation

Install the node.js because we need to install typescript from npm

You can download it from here.

I would recommend using Node.js Version Manager because it will be great for the future if you want to change the node version easily. I'm using fnm

npm install -g typescript

after you install the typescript globally, you can run this command below to convert .ts to .js

tsc "filename"

Basic Syntax

You can try to clone/fork this project, so you can follow along with my tutorial.

Install the packages

npm install

Compile the Javascript

tsc app.ts

Start the server

npm start

Play around in the app.ts file

Primitive Types (string, number, and boolean)

Every type in Javascript exists in TypeScript. string, number, boolean are the primitive types in Javascript. Let's see the chunk of code below.

try to copy to the app.ts file in the project.

function sum(a: number, b: number, message: string, printResult: boolean) {
  const result = a + b;

  if (printResult) {
    console.log(message + result);
  }
}

const num1 = 25;
const num2 = 10;
const message = 'The total is ';
const printResult = true;

sum(num1, num2, message, printResult);

Compile to Javascript

tsc app.ts

Try to change the variable type of num2 to be a string. It will give you an error message when you compile again.

PS: Typescript will be compiled the code to Javascript even though you have some errors, but there are warning in the console like the screenshot above.

Object

Declaring the Object type is quite similar with other primitive types.

const dog: object = {
  name: 'roger',
  age: 3,
};

However, we can even specify the attributes of the object.

const dog: {
  name: string;
  age: number;
} = {
  name: 'roger',
  age: 3,
};

So the variable dog can only receive an object with those specific attributes.

Array

We should declare also what's the variable inside the array, and the array can only receive the variable that has been declared.

let programmingLanguages: string[];
programmingLanguages = ['Javascript', 'Typescript', 'Ruby', 'Python'];

If we want to make the array is flexible with any type, we can use any variable. However, it is not good to use it because we remove the idea of strongly typed language.

let programmingLanguages: any[];
programmingLanguages = ['Javascript', 'Typescript', 1, true];

Tuple

Javascript doesn't have tuple, but programming languages such as C# and Java, have it. So, what is Tuple? A tuple is quite similar to an array, but a tuple is a fixed-length array and the type of each value can be different.

let role: [number, string];
role: [1, "Web Developer"]

Enum

When we need to put some contact values, Enum is the answer to our needs.

the value of this enum will start from 0, 1, and 2 because we didn't declare any value.

enum Role { ADMIN, READ_ONLY, AUTHOR }
console.log(Role.READ_ONLY); // 1

If we declare a number in the first enum, the following value of the enum will be increased.

enum Role { ADMIN = 5, READ_ONLY, AUTHOR }
console.log(Role.READ_ONLY); // 6

Enum mustn't declare the number, but we can also declare to string.

enum Role { ADMIN = 'ADMIN', READ_ONLY = 'READ_ONLY', AUTHOR = 'AUTHOR' }
console.log(Role.READ_ONLY); // READ_ONLY

Enum Typescript documentations is here

Any

Any is the special type in Typescript. Any can receive any type in the variable, so it loses the strict of Typescript. I don't recommend using it all the time.

let anyType: any;
anyType = 1;
anyType = "hello";
anyType = [1,2,3];
anyType = {};
anyType = false;

Union Types

union type let the variable receive more than one type by using |

let id: string | number;
id = 10; // Ok
id = "ID001"; // OK
id = [1, 2]; // Error

Type Aliases

We can change the type name as we want, but it will be useful for complicated types such as object and union.

type ID = string | number;
let id: ID
id = 10; // Ok
id = "ID001"; // OK
id = [1, 2]; // Error

Literal Types

This type lets the variable only receive the same value that has been declared.

let alwaysOne: "One";
alwaysOne = "One"; // OK
alwaysOne = "Two"; // Error