Learn TypeScript — The Ultimate Beginners Guide : Built-in Types

TypeScript Fundamentals in One Place

1. Introduction

Programming language divide into two categories :

Statically typed
Dynamically typed

in Statically-typed languages (C, Java, C#, ... ), the type of variable is set at the compile-time and cannot change later.

in Dynamically-typed languages (PHP, JavaScript, Python, ... ), the type of variable is determined at the run-time and can change later.

TypeScript is a programming language build on top of JavaScript ( essentially JavaScript with static typing and some additional features ) , so before we star make sure that you are familiar with this concepts in javascript:

Variables
Arrays
Objects
Functions
Arrow Functions
Destructuring
...

2. Built-in Types

as we know JavaScript has built-in types like :

number
string
boolean
array
object
undefined
null

So TypeScript extend this list and introduce some new built-in types such as :

any
unknown
never
enum
tuple

1- The Any Type : when you declare a variable and don't initialize it , the typescript compiler will assume that variable is type of any which means you can assign any type of data into it , here is an example :

let anyType; // let anyType: any

anyType = 12;

console.log(typeof anyType); // output: number

anyType = "Random string";

console.log(typeof anyType); // output: string

Note : To declare variables, functions you just need to follow this syntax :

let numberType: number = 12;
let numberType: string = 12;

function taxe(income: number): number {
  return income * 0.2;
}

2- Arrays :

let numbers = [1, 2, 3]; // let numbers: number[] = [1, 2, 3]

let anyTypes = []; // let anyTypes: any[]

anyType[0] = 100;
anyType[0] = "r_string";

let names = ["ahmed", "zineddine"]; // let names: string[] = ["ahmed", "zineddine"]

3- Tuples : A tuple is a typed array with a pre-defined length and types for each index.

let employee: [number, string] = [1, "Steve"];

4- Enums :

// const small = 1;
// const medium = 1;
// const large = 1;

const enum Size {
  Small = 1,
  medium,
  large,
}

let mySize: Size = Size.Small;

console.log(mySize); // output : 1

4- Objects :

/*
let employee: {
  id:number,
  name:string
} = {
  id:1,
  name:'zineddine'
}
*/

let employee = {
  id: 1,
  name: "zineddine",
};

let user: {
  readonly id: number;
  name: string;
  pseudo?: string;
  retire: (date: Date) => void; // function declaration
} = {
  id: 1,
  name: "zineddine",
  retire: (date: Date) => {
    console.log(date);
  },
};

user.id = 10; // Cannot assign to 'id' because it is a read-only property

5- Type Aliases :

type User = {
  readonly id: number;
  name: string;
  pseudo?: string;
  retire: (date: Date) => void; // function declaration
};

let user: User = {
  id: 1,
  name: "zineddine",
  retire: (date: Date) => {
    console.log(date);
  },
};

6- Union Types :

function kgToLbs(kg: number | string): number {
  // Narrowing
  if (typeof kg === "string") {
    return parseFloat(kg) * 2.2046;
  }

  return kg * 2.2046;
}

7- Intersection Types :

// make no sense right ?
let weight: number & string;

// let see a realistic example

type draggable = {
  drag: () => void;
};

type resizable = {
  resize: () => void;
};

let UIWidget: draggable & resizable;

UIWidget = {
  drag: () => {},
  resize: () => {},
};

8- Literal Types :

// let quantity: 5 | 100;

type Quantity = 50 | 100;
let quantity: Quantity;

quantity = 5; // Type '5' is not assignable to type 'Quantity'

type Metric = "m" | "cm" | "mm";

9- Nullable Types :

function greeting(name: string | null | undefined) {
  if (name) {
    return `Hello, ${name}`;
  }
  return "Hello, World";
}

greeting("John");
greeting(null);
greeting(undefined);

10- Optional Chaining :

type User = {
  id: number;
  birthday?: Date;
};

function getUser(id: number): User | null | undefined {
  if (id === 1) {
    return {
      id,
      birthday: new Date("2000-01-01"),
    };
  }

  return null;
}

getUser(0); // output null

getUser(1); // output { id: 1, birthday: Date }

// optional property access operator
getUser(1)?.birthday?.getFullYear(); // output 2000

// optional element access operator

let employees: string[] | null = null;
employees?.[0];

// optional function call operator

let log: any = null;

log?.("hello"); // return undefined

11- Nullish Coalescing Operator :

let speed: number | null = null;

let ride = {
  // Falsy values ( false, 0, '', null, undefined )
  // speed: speed || 30, if speed is falsy, set it to 30 , but 0 is falsy
  // speed: speed != null ? speed : 30,
  speed: speed ?? 30,
};

12- Type Assertions :

let phone = document.getElementById("phone");

phone.value; // Property 'value' does not exist on type 'HTMLElement'

// let email = <HTMLInputElement> document.getElementById('email');

let email = document.getElementById("email") as HTMLInputElement;

email.value;

13- The Unknown Type :

function render(document: any) {
  // no compile error , but runtime error
  document.whatEver();
}

function render(document: unknown) {
  /*
  compile error, now the compîler forces us to check the type of the argument before using it

  */

  document.whatEver();

  if (document instanceof String) {
    document.toLocaleLowerCase();
  }
}

13- The Never Type :

function reject(message: string): never {
  throw new Error(message);
}

function processEvent(): never {
  while (true) {
    // ...
  }
}

processEvent();

/*

 => this code will never be executed , but the compiler don't tell us , so we have to use the `never` type.

 => now the compiler will tell us that the function will never return : Unreachable code detected.

 */

console.log("Hello World!");