TypeScriptAll posts

TypeScript Basics

A practical walkthrough of TypeScript from primitives to generics, narrowing and discriminated unions, with runnable examples for each idea.

September 23, 202412 min read

On this page

Introduction
Usage
Syntax
Running TypeScript
Primitive Types
any
Functions
Objects
Type Aliases
Arrays
Union Type
Tuples
Enums
Interfaces
Interfaces vs Types
Setting up TypeScript for projects (Node.js)
Classes
Generics
Type Narrowing

Introduction

TypeScript is a superset of JavaScript, providing type safety and static type checking. It is a statically-typed language.

In statically typed languages, the data type of a variable is known at compile time, while in dynamically typed languages, the data type is assigned during runtime by the interpreter, depending on its value.

Usage

TypeScript is primarily a development tool, where the project still runs JavaScript.

Syntax

typescript

1let variableName: type = value;

Running TypeScript

To run a .ts program, follow these steps:

bash

1tsc fileName.ts2node fileName.js

The first step involves transpiling, where the TypeScript compiler transpiles the TypeScript code to JavaScript. Transpiling is the process of converting the source code from one programming language to another. It is often used in web development, especially with languages like TypeScript and JSX, which are not directly supported by web browsers.

Primitive Types

In TypeScript, primitive types such as string, number, and boolean are used to represent basic data types.

Note: JavaScript does not have a special runtime value for TypeScript types, so there's no equivalent to "int" or "float" - everything is simply number.

typescript

1let userId: number = 334455;2console.log(userId);

However, it's not always necessary to explicitly specify types. In some cases, TypeScript can infer types based on the assigned values. Overusing types can make the code verbose and less readable.

typescript

1let userId = 334455;2console.log(userId);

any

In situations where TypeScript cannot determine or is unsure about the type of a value, it marks the variable as any. However, using any is discouraged as it disables type checking. It's recommended to specify types explicitly or use the compiler flag noImplicitAny to flag implicit any types as errors.

Functions

Type annotations for functions are strong and recommended.

Syntax

typescript

1function myFunc(param: type): returnType {2  // Function logic3}

Arrow Functions

Arrow functions provide a concise syntax for writing functions.

typescript

1const myFunc = (param: type): returnType => {2  // Function logic3};

Default Value

typescript

1function signUp(name: string, email: string, hasPaid: boolean = false) {2  return {3    name,4    email,5    hasPaid,6  };7}8const user = signUp("MyName", "test@gmail.com");

Return Type

typescript

1function getName(name: string): string {2  return name;3}

never

Some functions never return a value. The never type represents values that are never observed. In a return type, this means that the function throws an exception or terminates execution of the program.

typescript

1const fail = (message: string): never => {2  throw new Error(message);3};4 5fail("There was an error!");

Objects

Assigning type to an object

typescript

1let myObj: { name: string; age: number } = {2  name: "John",3  age: 22,4};5 6console.log(myObj);

Bad behaviour of objects

When a function is called with an optional parameter, it throws an error. However, if an object with an optional property is created and assigned to a variable, calling the function with that variable does not result in an error.

typescript

1function createUser({ name, isPaid }: { name: string; isPaid: boolean }) {2  console.log(name);3  console.log(isPaid);4}5 6// Throws an error7createUser({ name: "AAA", isPaid: true, email: "test@gmail.com" });8 9// No error10let newUser = { name: "John Doe", isPaid: true, email: "hello@gmail.com" };11createUser(newUser);

Type Aliases

Type Aliase is a name for any type. This is convenient, but it's common to want to use the same type more than once and refer to it by a single name.

typescript

1// Defining a type:2type Point = {3  x: number;4  y: number;5};6 7// Using the type8function printCoord(pt: Point) {9  console.log(`The value of X coordinate is: ${pt.x}.`);10  console.log(`The value of y coordinate is: ${pt.y}.`);11}12 13printCoord({ x: 100, y: 100 });

Combining types

typescript

1type cardNumber = {2  cardumber: string;3};4 5type cardDate = {6  carddate: Date;7};8 9// Combination of the above two types10type cardDetails = cardNumber & cardDate;

readonly & "?"(optional)

readonly is used to make a property unchangeable, the value cannot be changed after it is set. ? marks the property as optional.

typescript

1type User = {2  readonly _id: string;3  name: string;4  email: string;5  creditDetails?: cardDetails;6};7 8let user1: User = {9  _id: "1",10  name: "John",11  email: "john@gmail.com",12  // Since creditDetails is optional we choose not to include it.13};14 15console.log(user1);16 17let user2: User = {18  _id: "2",19  name: "Doe",20  email: "doe@gmail.com",21  creditDetails: {22    cardumber: "123",23    carddate: new Date(),24  },25};26 27console.log(user2);

Arrays

To specify the type of an array like [1,2,3], you can use the syntax number[], this works for any type (e.g. string[]).

typescript

1let list1: number[] = [1, 2, 3];2console.log(list1);3 4// Another syntax:5const list2: Array<Number> = [4, 5, 6];6console.log(list2);7 8// Array of objects9type User = {10  name: string;11  age: number;12};13 14const allUsers: User[] = [];15 16allUsers.push(17  {18    name: "John",19    age: 22,20  },21  {22    name: "Doe",23    age: 23,24  }25);26console.log(allUsers);27 28// 2D arrays29const matrix: number[][] = [30  [1, 2, 3, 4],31  [5, 6, 7, 8],32];33console.log(matrix);

Union Type

Union types are used when a value can be more than a single type. We use the vertical bar (|) to separate each type.

typescript

1type item = "🍔" | "🍕" | "🌭" | "🥪";2type addons = "🍟" | "🥤";3 4let myItems: { item: item; addon: addons } = { item: "🍔", addon: "🍟" };5console.log(`MyItems: ${myItems.item} + ${myItems.addon}`);6 7const numbers: (string | number)[] = [1, 2, "3"];8console.log(numbers);

Note: Direct manipulation on individual types is not allowed because TS treats the union type as a new data type.

typescript

1function getId(id: number | string) {2  //not allowed3  //id.toUpperCase();4 5  if (typeof id === "string") {6    return id.toLowerCase();7  }8 9  return id;10}11 12console.log(getId("1234"));13console.log(getId(1234));

Tuples

Tuples are typed arrays of pre-defined length and types for each index. The order of data type in each index should be maintained.

typescript

1const rgb: [number, number, number] = [255, 255, 255];2console.log(rgb);3 4const user2: [string, number] = ["john doe", 22];5console.log(user2);

Array methods are allowed on tuples that violate type safety, so a good practice would be to make a tuple "readonly".

typescript

1//strangely this is allowed:2user2.push(344);3 4const user3: readonly [string, number] = ["john doe", 22];5// this will now throw an error:6user3.push(344);

Enums

A special class that represents a group of constants, can be string or numeric.

typescript

1enum MEMBER_ROLE {2  ADMIN = "admin",3  MODERATOR = "moderator",4  GUEST = "guest",5}6 7const memberRole = MEMBER_ROLE.GUEST;8console.log(memberRole);

First value is initialised to 0 by default then 1 is added to each additional value.

typescript

1const enum ZERO_ONE {2  ZERO,3  ONE,4}5 6const zero = ZERO_ONE.ZERO;7console.log(zero);8 9const one = ZERO_ONE.ONE;10console.log(one);

We can also set the value and have it auto increment from that.

typescript

1const enum TWO_THREE {2  TWO = 2,3  THREE,4}5 6const two = TWO_THREE.TWO;7console.log(two);8 9const three = TWO_THREE.THREE;10console.log(three);

Or we can initialise all the values.

typescript

1const enum HUNDREDS {2  ONE = 100,3  TWO = 200,4  THREE = 300,5}6 7const oneHundred = HUNDREDS.ONE;8console.log(oneHundred);

Interfaces

Used to define shape/structure of objects. Interfaces are similar to type aliases, except they only apply to object types.

typescript

1interface rectangle {2  height: number;3  width: number;4  area?(): number;5}6 7//rect1 adheres to interface rectangle.8const rect1: rectangle = {9  height: 1.5,10  width: 2.5,11};12console.log(rect1);13 14const rect2: rectangle = {15  height: 2,16  width: 4,17  area: function () {18    return this.height * this.width;19  },20};21 22const areaOfRectangle = rect2.area ? rect2.area() : "Area cannot be computed";23console.log(areaOfRectangle);

Interfaces can extend each other's definition. Extending simply means you are creating a new interface with same properties as that of the original interface, plus something new.

typescript

1interface coloredRectangle extends rectangle {2  color: string;3}4 5const coloredRect: coloredRectangle = {6  height: 2.5,7  width: 4.5,8  color: "green",9};10console.log(coloredRect);

Interfaces vs Types

Declaration Syntax

Type: Types can be used to define simple types, union types, intersection types, and more.

typescript

1type MyType = number | string;

Interface: Interfaces are typically used for defining object shapes.

typescript

1interface MyInterface {2  prop1: number;3  prop2: string;4}

Extending/Implementing

Type: A type alias has no extends clause. You build on one with an intersection instead, and a class can implement a type alias as long as it names an object shape rather than a union.

typescript

1type A = { prop: number };2type B = { other: string };3 4type C = A & B; // Intersection, the alias way to extend5 6class Impl implements A {7  prop = 1; // A class can implement an object type alias8}

Interface: Interfaces can extend other interfaces and can be implemented by classes.

typescript

1interface A {2  prop1: number;3}4 5interface B {6  prop2: string;7}8 9interface C extends A, B {} // Extending interfaces

Declaration Merging

Type: Types don't support declaration merging.

typescript

1type MyType = { prop1: number };2type MyType = { prop2: string }; // Error: Duplicate identifier 'MyType'.

Interface: Interfaces support declaration merging, which means you can declare an interface multiple times, and their members will be merged.

typescript

1interface MyInterface {2  prop1: number;3}4 5interface MyInterface {6  prop2: string;7}8 9const MyObj: MyInterface = { prop1: 1, prop2: "1" }; // Valid

Setting up TypeScript for projects (Node.js)

Create tsconfig.json file

bash

tsc --init

tsconfig.json is a configuration file used by the TypeScript compiler (tsc) to specify compiler options and project settings for a TypeScript project. This file allows developers to define various settings such as compilation target, module system, output directory, and more.

Initialise Node Package Manager

bash

npm init -y

Create dist and src folders.
Create index.html file and make it point to index.js in the dist folder by adding a script tag.
Create index.ts in the src folder.
Specify output directory in tsconfig.json

json

"outDir": "./dist"

All TypeScript files will be transpiled to JavaScript files with the same name as the TypeScript files and stored in the dist directory.

Add content to your .ts file.
Compile and run .ts file.

bash

tsc -w

This command runs TypeScript files in "watch mode", allowing the compiler to detect changes and recompile automatically.

Classes

TypeScript offers full support for the class keyword introduced in ES2015.

Here’s the most basic class - an empty one:

typescript

1class Empty {}

Fields

A field declaration creates a public writeable property on a class.

typescript

1class Point {2  x = 0;3  y = 0;4}5 6const pt = new Point();7console.log(pt);8 9class User {10  //All fields are marked 'public' by default11  email: string;12  name: string;13  age: number;14 15  readonly role: string = "GUEST";16 17  constructor(email: string, name: string = "Username", age: number) {18    this.email = email;19    this.name = name;20    this.age = age;21  }22}23 24const user1 = new User("test@gmail.com", "John Doe", 22);25console.log(user1);

Getters & Setters

A getter method returns the property’s value. A getter is also called an accessor.
A setter method updates the property’s value. A setter is also known as a mutator.
A getter method starts with the keyword get and a setter method starts with the keyword set.

Note: A set accessor cannot have a return type annotation.

typescript

1class Rectangle {2  height: number;3  width: number;4 5  private color: string = "";6 7  constructor(height: number, width: number) {8    this.height = height;9    this.width = width;10  }11 12  get area(): number {13    return Number((this.height * this.width).toFixed(2));14  }15 16  get rectColor(): string {17    return this.color;18  }19 20  set rectColor(color: string) {21    if (color === "black" || color === "white") {22      throw new Error("Color not valid.");23    }24    this.color = color;25  }26}27 28const rectangle = new Rectangle(2.2, 4.2);29 30rectangle.rectColor = "green";31 32console.log("Area: " + rectangle.area + ".");33console.log("Color: " + rectangle.rectColor + ".");34 35console.log(rectangle);

Interfaces can be implemented by classes.

typescript

1interface TakePhoto {2  photoMode: string;3  filter: string;4}5 6class Instagram implements TakePhoto {7  photoMode: string;8  filter: string;9  constructor(photoMode: string, filter: string) {10    this.photoMode = photoMode;11    this.filter = filter;12  }13}14 15const instaPhoto = new Instagram("Manual mode", "Black and White");16console.log(instaPhoto);

Inheritance

It is the mechanism in which one class derives the properties of another class. In TypeScript a base class inherits a parent class using the extends keyword.

private keyword: private access modifier makes the field only accesssible inside a class.
protected keyword: protected members are only visible to subclasses of the class they’re declared in.
super keyword: It allows us to invoke constructor of parent class, call parent class methods within a subclass. The super keyword is useful for overriding and extending the behavior of methods defined in a parent class, especially when those methods are not declared as private.

Note: Constructors for derived class must contain a super call. Super must be called before accessing this in the constructor of a derived class.

typescript

1class Family {2  public name: string;3  protected role: string | undefined;4  private access: boolean | undefined;5 6  constructor(name: string) {7    this.name = name;8  }9 10  protected setAccess() {11    if (this.role === "parent") {12      this.access = true;13    } else {14      this.access = false;15    }16  }17 18  family(): void {19    console.log("I belong to this family.");20  }21}22 23class Parent extends Family {24  constructor(name: string) {25    super(name);26    this.role = "parent";27    this.setAccess();28  }29 30  family(): void {31    super.family();32    console.log("I am a Parent and I have access.");33  }34}35 36const parent1 = new Parent("John");37parent1.family();38console.log(parent1);39 40class Child extends Family {41  constructor(name: string) {42    super(name);43    this.role = "child";44    this.setAccess();45  }46 47  family(): void {48    super.family();49    console.log("I am a Child and I don't have access.");50  }51}52 53const child1 = new Child("Doe");54child1.family();55console.log(child1);

Abstract classes

Define an abstract class in Typescript using the abstract keyword. Abstract classes are mainly for inheritance where other classes may derive from them. We cannot create an instance of an abstract class.

An abstract class typically includes one or more abstract methods or property declarations. The class which extends the abstract class must define all the abstract methods.

typescript

1abstract class Animal {2  type: string;3  constructor(type: string) {4    this.type = type;5  }6 7  //regular method -> has to be implemented when declared.8  animalType(): void {9    console.log(`${this.type}.`);10  }11 12  //abstract method -> can be only implemented in the child class.13  abstract animalSound(): string;14}15 16class Dog extends Animal {17  breed: string;18  constructor(type: string, breed: string) {19    super(type);20    this.breed = breed;21  }22 23  animalSound(): string {24    return "Woof! Woof!";25  }26}27 28const dog = new Dog("Mammal", "Husky");29const dogSound = dog.animalSound();30dog.animalType();31console.log(dog);32console.log(dogSound);

Generics

Generics allow creating 'type variables' which can be used to create classes, functions & type aliases that don't need to explicitly define the types that they use.

They allow you to create reusable components (such as functions, classes, or interfaces) that can work with any data type while still providing type safety.

typescript

1function identityAny(val: any): any {2  return val;3}4console.log(identityAny(2));5 6function identityGeneric<Type>(val: Type): Type {7  return val;8}9console.log(identityGeneric(2));

While using any is certainly generic in that it will cause the function to accept any and all types for the type of arg, we actually are losing the information about what that type was when the function returns. If we passed in a number, the only information we have is that any type could be returned.

Instead, we need a way of capturing the type of the argument in such a way that we can also use it to denote what is being returned. Here, we will use a type variable, a special kind of variable that works on types rather than values.

Custom generic interface

typescript

1interface Pair<T, U> {2  first: T;3  second: U;4}5 6function logPair<T, U>(pair: Pair<T, U>): void {7  console.log(`First: ${pair.first}, Second: ${pair.second}`);8}9 10const stringNumberPair: Pair<string, number> = { first: "Hello", second: 123 };11logPair(stringNumberPair);12 13const booleanObjectPair: Pair<boolean, { name: string }> = {14  first: true,15  second: { name: "John" },16};17logPair(booleanObjectPair);

In the above example, when you define a generic type or interface like Pair<T, U>, T and U are placeholders for the actual types that will be used when instances of Pair are created. This allows you to create instances of Pair with different types for the first and second properties without having to define a separate interface for each combination of types.

Passing an array and using arrow functions

typescript

1//use either T[] or Array<T>2function getArray<T>(list: Array<T>): Array<T> {3  return list;4}5console.log(getArray(["1", "2", "3"]));

typescript

1const getArrayFirst = <T>(list: T[]): T => {2  return list[0];3};4console.log(getArrayFirst(["1", "2", "3"]));

Extending a generic type

typescript

1interface database {2  name: string;3  email: string;4  age: number;5}6 7function getUser<T extends database, U extends database>(8  user1: T,9  user2: U10): object {11  return {12    user1,13    user2,14  };15}16 17const user1 = {18  name: "John",19  email: "john@gmail.com",20  age: 22,21};22 23const user2 = {24  name: "Doe",25  email: "doe@gmail.com",26  age: 24,27};28 29console.log(getUser(user1, user2));

Generic class

typescript

1interface Mobile {2  model: string;3  screenSize: number;4  color: string;5  brand: string;6  operatingSystem: string;7}8 9interface Shirt {10  style: string;11  size: string;12  color: string;13}14 15class ECommerce<T extends Mobile | Shirt> {16  cart: T[] = [];17 18  addToCart(product: T) {19    this.cart.push(product);20  }21}22 23const order = new ECommerce();24 25order.addToCart({26  model: "iPhone 15 pro",27  screenSize: 6.12,28  color: "Black Titanium",29  brand: "Apple",30  operatingSystem: "ios 17",31});32 33order.addToCart({34  style: "Checked",35  size: "medium",36  color: "Navy Blue",37});38 39console.log("\n" + "MyCart:");40console.log(order.cart);

Type Narrowing

Type narrowing in TypeScript refers to the process of refining the type of a variable within a certain block of code based on certain conditions. This helps TypeScript infer more specific types, improving type safety and enabling better code optimization.

typescript

1function printAll(strs: string | string[] | null) {2  if (strs) {3    if (typeof strs === "object") {4      for (const s of strs) {5        console.log(s);6      }7    } else if (typeof strs === "string") {8      console.log(strs);9    }10  }11}12 13printAll("John Doe");14printAll(["John", "Doe"]);

While it might not look like much, there’s actually a lot going on under the covers here. Much like how TypeScript analyzes runtime values using static types, it overlays type analysis on JavaScript’s runtime control flow constructs like if/else, conditional ternaries, loops, truthiness checks, etc., which can all affect those types.

`in` operator

The in operator is used for type narrowing, which means it helps narrow down the type of an object, based on wether a property exists within it. It's particularly useful when working with union or discriminated types.

typescript

1interface Square {2  kind: "square";3  size: number;4}5 6interface Rectangle {7  kind: "rectangle";8  width: number;9  height: number;10}11 12type Shape = Square | Rectangle;13 14function calculateArea(shape: Shape): number {15  if ("size" in shape) {16    // 'shape' is of type 'Square' here17    return shape.size * shape.size;18  } else {19    // 'shape' is of type 'Rectangle' here20    return shape.width * shape.height;21  }22}23 24const square: Square = { kind: "square", size: 5 };25const rectangle: Rectangle = { kind: "rectangle", width: 6, height: 4 };26console.log(calculateArea(square));27console.log(calculateArea(rectangle));

`instanceof` operator

The instanceof keyword is used to check whether an object is an instance of a particular class or constructor function. It returns true if the object is an instance of the specified class or its subclasses; otherwise, it returns false.

typescript

1function logValue(x: Date | string) {2  if (x instanceof Date) {3    console.log(x.toUTCString());4  } else {5    console.log(x.toUpperCase());6  }7}8 9logValue("Sunday, 25th Dec");10logValue(new Date());

Type predicate

A type predicate is a way to assert the type of a variable within a conditional statement. It allows you to narrow down the type of a variable within a certain block of code, based on some condition.

typescript

1type Fish = { swim: () => void };2type Bird = { fly: () => void };3 4function isFish(pet: Fish | Bird): pet is Fish {5  return (pet as Fish).swim !== undefined;6}7 8function feedPet(pet: Fish | Bird) {9  if (isFish(pet)) {10    pet.swim();11    console.log("Fish food");12  } else {13    pet.fly();14    console.log("Bird food");15  }16}17 18const myFish: Fish = { swim: () => console.log("Fish is swimming") };19const myBird: Bird = { fly: () => console.log("Bird is flying") };20 21feedPet(myFish);22feedPet(myBird);

In the isFish function, we define a type predicate pet is Fish, indicating that if the condition (pet as Fish).swim !== undefined is true, then pet is indeed a Fish. Within the feedPet function, when we call isFish(pet), TypeScript narrows down the type of pet to Fish if the condition is met, allowing us to safely call pet.swim() without TypeScript throwing errors.

Discriminated Union & Exhaustive Checking

A discriminated union is a union type that utilizes a common property in each of its constituent types to allow for more precise type checking. This common property, typically called a "discriminant" or "tag", is used to discriminate between the different possible shapes within the union. (kind in this case)

Exhaustive checking refers to ensuring that all possible cases of the discriminated union are handled within a switch statement or if-else chain. This helps TypeScript catch errors where you might forget to handle a specific case, ensuring that your code is more robust.

The never type is used to indicate that a value should never occur. When used in the context of exhaustive checking with discriminated unions, it helps TypeScript ensure that all possible cases are handled, leaving no room for unexpected values.

typescript

1interface Circle {2  kind: "circle";3  radius: number;4}5 6interface Square {7  kind: "square";8  side: number;9}10 11type Shape = Circle | Square;12 13function getShape(shape: Shape): string {14  if (shape.kind === "circle") {15    return "Circle";16  }17  return "Square";18}19 20function getArea(shape: Shape): number {21  switch (shape.kind) {22    case "circle":23      return Math.PI * shape.radius ** 2;24    case "square":25      return shape.side * shape.side;26    default:27      const _defaultShape: never = shape;28      return _defaultShape;29  }30}31 32const circle: Circle = {33  kind: "circle",34  radius: 2,35};36 37const square: Square = {38  kind: "square",39  side: 5,40};41 42console.log(getShape(circle));43console.log(getShape(square));44console.log(Number(getArea(circle).toFixed(2)));45console.log(Number(getArea(square).toFixed(2)));

Source

Every example in this post lives in a repository. Browse it, raise an issue, or send a fix.

View the repository

TypeScriptAll posts

TypeScript Basics

A practical walkthrough of TypeScript from primitives to generics, narrowing and discriminated unions, with runnable examples for each idea.

September 23, 202412 min read

On this page

Introduction
Usage
Syntax
Running TypeScript
Primitive Types
any
Functions
Objects
Type Aliases
Arrays
Union Type
Tuples
Enums
Interfaces
Interfaces vs Types
Setting up TypeScript for projects (Node.js)
Classes
Generics
Type Narrowing

Introduction

TypeScript is a superset of JavaScript, providing type safety and static type checking. It is a statically-typed language.

Usage

TypeScript is primarily a development tool, where the project still runs JavaScript.

Syntax

typescript

1let variableName: type = value;

Running TypeScript

To run a .ts program, follow these steps:

bash

1tsc fileName.ts2node fileName.js

Primitive Types

In TypeScript, primitive types such as string, number, and boolean are used to represent basic data types.

Note: JavaScript does not have a special runtime value for TypeScript types, so there's no equivalent to "int" or "float" - everything is simply number.

typescript

1let userId: number = 334455;2console.log(userId);

However, it's not always necessary to explicitly specify types. In some cases, TypeScript can infer types based on the assigned values. Overusing types can make the code verbose and less readable.

typescript

1let userId = 334455;2console.log(userId);

any

Functions

Type annotations for functions are strong and recommended.

Syntax

typescript

1function myFunc(param: type): returnType {2  // Function logic3}

Arrow Functions

Arrow functions provide a concise syntax for writing functions.

typescript

1const myFunc = (param: type): returnType => {2  // Function logic3};

Default Value

typescript

1function signUp(name: string, email: string, hasPaid: boolean = false) {2  return {3    name,4    email,5    hasPaid,6  };7}8const user = signUp("MyName", "test@gmail.com");

Return Type

typescript

1function getName(name: string): string {2  return name;3}

never

typescript

1const fail = (message: string): never => {2  throw new Error(message);3};4 5fail("There was an error!");

Objects

Assigning type to an object

typescript

1let myObj: { name: string; age: number } = {2  name: "John",3  age: 22,4};5 6console.log(myObj);

Bad behaviour of objects

typescript

1function createUser({ name, isPaid }: { name: string; isPaid: boolean }) {2  console.log(name);3  console.log(isPaid);4}5 6// Throws an error7createUser({ name: "AAA", isPaid: true, email: "test@gmail.com" });8 9// No error10let newUser = { name: "John Doe", isPaid: true, email: "hello@gmail.com" };11createUser(newUser);

Type Aliases

Type Aliase is a name for any type. This is convenient, but it's common to want to use the same type more than once and refer to it by a single name.

typescript

1// Defining a type:2type Point = {3  x: number;4  y: number;5};6 7// Using the type8function printCoord(pt: Point) {9  console.log(`The value of X coordinate is: ${pt.x}.`);10  console.log(`The value of y coordinate is: ${pt.y}.`);11}12 13printCoord({ x: 100, y: 100 });

Combining types

typescript

1type cardNumber = {2  cardumber: string;3};4 5type cardDate = {6  carddate: Date;7};8 9// Combination of the above two types10type cardDetails = cardNumber & cardDate;

readonly & "?"(optional)

readonly is used to make a property unchangeable, the value cannot be changed after it is set. ? marks the property as optional.

typescript

1type User = {2  readonly _id: string;3  name: string;4  email: string;5  creditDetails?: cardDetails;6};7 8let user1: User = {9  _id: "1",10  name: "John",11  email: "john@gmail.com",12  // Since creditDetails is optional we choose not to include it.13};14 15console.log(user1);16 17let user2: User = {18  _id: "2",19  name: "Doe",20  email: "doe@gmail.com",21  creditDetails: {22    cardumber: "123",23    carddate: new Date(),24  },25};26 27console.log(user2);

Arrays

To specify the type of an array like [1,2,3], you can use the syntax number[], this works for any type (e.g. string[]).

typescript

1let list1: number[] = [1, 2, 3];2console.log(list1);3 4// Another syntax:5const list2: Array<Number> = [4, 5, 6];6console.log(list2);7 8// Array of objects9type User = {10  name: string;11  age: number;12};13 14const allUsers: User[] = [];15 16allUsers.push(17  {18    name: "John",19    age: 22,20  },21  {22    name: "Doe",23    age: 23,24  }25);26console.log(allUsers);27 28// 2D arrays29const matrix: number[][] = [30  [1, 2, 3, 4],31  [5, 6, 7, 8],32];33console.log(matrix);

Union Type

Union types are used when a value can be more than a single type. We use the vertical bar (|) to separate each type.

typescript

1type item = "🍔" | "🍕" | "🌭" | "🥪";2type addons = "🍟" | "🥤";3 4let myItems: { item: item; addon: addons } = { item: "🍔", addon: "🍟" };5console.log(`MyItems: ${myItems.item} + ${myItems.addon}`);6 7const numbers: (string | number)[] = [1, 2, "3"];8console.log(numbers);

Note: Direct manipulation on individual types is not allowed because TS treats the union type as a new data type.

typescript

1function getId(id: number | string) {2  //not allowed3  //id.toUpperCase();4 5  if (typeof id === "string") {6    return id.toLowerCase();7  }8 9  return id;10}11 12console.log(getId("1234"));13console.log(getId(1234));

Tuples

Tuples are typed arrays of pre-defined length and types for each index. The order of data type in each index should be maintained.

typescript

1const rgb: [number, number, number] = [255, 255, 255];2console.log(rgb);3 4const user2: [string, number] = ["john doe", 22];5console.log(user2);

Array methods are allowed on tuples that violate type safety, so a good practice would be to make a tuple "readonly".

typescript

1//strangely this is allowed:2user2.push(344);3 4const user3: readonly [string, number] = ["john doe", 22];5// this will now throw an error:6user3.push(344);

Enums

A special class that represents a group of constants, can be string or numeric.

typescript

1enum MEMBER_ROLE {2  ADMIN = "admin",3  MODERATOR = "moderator",4  GUEST = "guest",5}6 7const memberRole = MEMBER_ROLE.GUEST;8console.log(memberRole);

First value is initialised to 0 by default then 1 is added to each additional value.

typescript

1const enum ZERO_ONE {2  ZERO,3  ONE,4}5 6const zero = ZERO_ONE.ZERO;7console.log(zero);8 9const one = ZERO_ONE.ONE;10console.log(one);

We can also set the value and have it auto increment from that.

typescript

1const enum TWO_THREE {2  TWO = 2,3  THREE,4}5 6const two = TWO_THREE.TWO;7console.log(two);8 9const three = TWO_THREE.THREE;10console.log(three);

Or we can initialise all the values.

typescript

1const enum HUNDREDS {2  ONE = 100,3  TWO = 200,4  THREE = 300,5}6 7const oneHundred = HUNDREDS.ONE;8console.log(oneHundred);

Interfaces

Used to define shape/structure of objects. Interfaces are similar to type aliases, except they only apply to object types.

typescript

1interface rectangle {2  height: number;3  width: number;4  area?(): number;5}6 7//rect1 adheres to interface rectangle.8const rect1: rectangle = {9  height: 1.5,10  width: 2.5,11};12console.log(rect1);13 14const rect2: rectangle = {15  height: 2,16  width: 4,17  area: function () {18    return this.height * this.width;19  },20};21 22const areaOfRectangle = rect2.area ? rect2.area() : "Area cannot be computed";23console.log(areaOfRectangle);

Interfaces can extend each other's definition. Extending simply means you are creating a new interface with same properties as that of the original interface, plus something new.

typescript

1interface coloredRectangle extends rectangle {2  color: string;3}4 5const coloredRect: coloredRectangle = {6  height: 2.5,7  width: 4.5,8  color: "green",9};10console.log(coloredRect);

Interfaces vs Types

Declaration Syntax

Type: Types can be used to define simple types, union types, intersection types, and more.

typescript

1type MyType = number | string;

Interface: Interfaces are typically used for defining object shapes.

typescript

1interface MyInterface {2  prop1: number;3  prop2: string;4}

Extending/Implementing

Type: A type alias has no extends clause. You build on one with an intersection instead, and a class can implement a type alias as long as it names an object shape rather than a union.

typescript

1type A = { prop: number };2type B = { other: string };3 4type C = A & B; // Intersection, the alias way to extend5 6class Impl implements A {7  prop = 1; // A class can implement an object type alias8}

Interface: Interfaces can extend other interfaces and can be implemented by classes.

typescript

1interface A {2  prop1: number;3}4 5interface B {6  prop2: string;7}8 9interface C extends A, B {} // Extending interfaces

Declaration Merging

Type: Types don't support declaration merging.

typescript

1type MyType = { prop1: number };2type MyType = { prop2: string }; // Error: Duplicate identifier 'MyType'.

Interface: Interfaces support declaration merging, which means you can declare an interface multiple times, and their members will be merged.

typescript

1interface MyInterface {2  prop1: number;3}4 5interface MyInterface {6  prop2: string;7}8 9const MyObj: MyInterface = { prop1: 1, prop2: "1" }; // Valid

Setting up TypeScript for projects (Node.js)

Create tsconfig.json file

bash

tsc --init

Initialise Node Package Manager

bash

npm init -y

Create dist and src folders.
Create index.html file and make it point to index.js in the dist folder by adding a script tag.
Create index.ts in the src folder.
Specify output directory in tsconfig.json

json

"outDir": "./dist"

All TypeScript files will be transpiled to JavaScript files with the same name as the TypeScript files and stored in the dist directory.

Add content to your .ts file.
Compile and run .ts file.

bash

tsc -w

This command runs TypeScript files in "watch mode", allowing the compiler to detect changes and recompile automatically.

Classes

TypeScript offers full support for the class keyword introduced in ES2015.

Here’s the most basic class - an empty one:

typescript

1class Empty {}

Fields

A field declaration creates a public writeable property on a class.

typescript

1class Point {2  x = 0;3  y = 0;4}5 6const pt = new Point();7console.log(pt);8 9class User {10  //All fields are marked 'public' by default11  email: string;12  name: string;13  age: number;14 15  readonly role: string = "GUEST";16 17  constructor(email: string, name: string = "Username", age: number) {18    this.email = email;19    this.name = name;20    this.age = age;21  }22}23 24const user1 = new User("test@gmail.com", "John Doe", 22);25console.log(user1);

Getters & Setters

A getter method returns the property’s value. A getter is also called an accessor.
A setter method updates the property’s value. A setter is also known as a mutator.
A getter method starts with the keyword get and a setter method starts with the keyword set.

Note: A set accessor cannot have a return type annotation.

typescript

1class Rectangle {2  height: number;3  width: number;4 5  private color: string = "";6 7  constructor(height: number, width: number) {8    this.height = height;9    this.width = width;10  }11 12  get area(): number {13    return Number((this.height * this.width).toFixed(2));14  }15 16  get rectColor(): string {17    return this.color;18  }19 20  set rectColor(color: string) {21    if (color === "black" || color === "white") {22      throw new Error("Color not valid.");23    }24    this.color = color;25  }26}27 28const rectangle = new Rectangle(2.2, 4.2);29 30rectangle.rectColor = "green";31 32console.log("Area: " + rectangle.area + ".");33console.log("Color: " + rectangle.rectColor + ".");34 35console.log(rectangle);

Interfaces can be implemented by classes.

typescript

1interface TakePhoto {2  photoMode: string;3  filter: string;4}5 6class Instagram implements TakePhoto {7  photoMode: string;8  filter: string;9  constructor(photoMode: string, filter: string) {10    this.photoMode = photoMode;11    this.filter = filter;12  }13}14 15const instaPhoto = new Instagram("Manual mode", "Black and White");16console.log(instaPhoto);

Inheritance

It is the mechanism in which one class derives the properties of another class. In TypeScript a base class inherits a parent class using the extends keyword.

private keyword: private access modifier makes the field only accesssible inside a class.
protected keyword: protected members are only visible to subclasses of the class they’re declared in.
super keyword: It allows us to invoke constructor of parent class, call parent class methods within a subclass. The super keyword is useful for overriding and extending the behavior of methods defined in a parent class, especially when those methods are not declared as private.

Note: Constructors for derived class must contain a super call. Super must be called before accessing this in the constructor of a derived class.

typescript

1class Family {2  public name: string;3  protected role: string | undefined;4  private access: boolean | undefined;5 6  constructor(name: string) {7    this.name = name;8  }9 10  protected setAccess() {11    if (this.role === "parent") {12      this.access = true;13    } else {14      this.access = false;15    }16  }17 18  family(): void {19    console.log("I belong to this family.");20  }21}22 23class Parent extends Family {24  constructor(name: string) {25    super(name);26    this.role = "parent";27    this.setAccess();28  }29 30  family(): void {31    super.family();32    console.log("I am a Parent and I have access.");33  }34}35 36const parent1 = new Parent("John");37parent1.family();38console.log(parent1);39 40class Child extends Family {41  constructor(name: string) {42    super(name);43    this.role = "child";44    this.setAccess();45  }46 47  family(): void {48    super.family();49    console.log("I am a Child and I don't have access.");50  }51}52 53const child1 = new Child("Doe");54child1.family();55console.log(child1);

Abstract classes

An abstract class typically includes one or more abstract methods or property declarations. The class which extends the abstract class must define all the abstract methods.

typescript

1abstract class Animal {2  type: string;3  constructor(type: string) {4    this.type = type;5  }6 7  //regular method -> has to be implemented when declared.8  animalType(): void {9    console.log(`${this.type}.`);10  }11 12  //abstract method -> can be only implemented in the child class.13  abstract animalSound(): string;14}15 16class Dog extends Animal {17  breed: string;18  constructor(type: string, breed: string) {19    super(type);20    this.breed = breed;21  }22 23  animalSound(): string {24    return "Woof! Woof!";25  }26}27 28const dog = new Dog("Mammal", "Husky");29const dogSound = dog.animalSound();30dog.animalType();31console.log(dog);32console.log(dogSound);

Generics

Generics allow creating 'type variables' which can be used to create classes, functions & type aliases that don't need to explicitly define the types that they use.

They allow you to create reusable components (such as functions, classes, or interfaces) that can work with any data type while still providing type safety.

typescript

1function identityAny(val: any): any {2  return val;3}4console.log(identityAny(2));5 6function identityGeneric<Type>(val: Type): Type {7  return val;8}9console.log(identityGeneric(2));

Custom generic interface

typescript

1interface Pair<T, U> {2  first: T;3  second: U;4}5 6function logPair<T, U>(pair: Pair<T, U>): void {7  console.log(`First: ${pair.first}, Second: ${pair.second}`);8}9 10const stringNumberPair: Pair<string, number> = { first: "Hello", second: 123 };11logPair(stringNumberPair);12 13const booleanObjectPair: Pair<boolean, { name: string }> = {14  first: true,15  second: { name: "John" },16};17logPair(booleanObjectPair);

Passing an array and using arrow functions

typescript

1//use either T[] or Array<T>2function getArray<T>(list: Array<T>): Array<T> {3  return list;4}5console.log(getArray(["1", "2", "3"]));

typescript

1const getArrayFirst = <T>(list: T[]): T => {2  return list[0];3};4console.log(getArrayFirst(["1", "2", "3"]));

Extending a generic type

typescript

1interface database {2  name: string;3  email: string;4  age: number;5}6 7function getUser<T extends database, U extends database>(8  user1: T,9  user2: U10): object {11  return {12    user1,13    user2,14  };15}16 17const user1 = {18  name: "John",19  email: "john@gmail.com",20  age: 22,21};22 23const user2 = {24  name: "Doe",25  email: "doe@gmail.com",26  age: 24,27};28 29console.log(getUser(user1, user2));

Generic class

typescript

1interface Mobile {2  model: string;3  screenSize: number;4  color: string;5  brand: string;6  operatingSystem: string;7}8 9interface Shirt {10  style: string;11  size: string;12  color: string;13}14 15class ECommerce<T extends Mobile | Shirt> {16  cart: T[] = [];17 18  addToCart(product: T) {19    this.cart.push(product);20  }21}22 23const order = new ECommerce();24 25order.addToCart({26  model: "iPhone 15 pro",27  screenSize: 6.12,28  color: "Black Titanium",29  brand: "Apple",30  operatingSystem: "ios 17",31});32 33order.addToCart({34  style: "Checked",35  size: "medium",36  color: "Navy Blue",37});38 39console.log("\n" + "MyCart:");40console.log(order.cart);

Type Narrowing

typescript

1function printAll(strs: string | string[] | null) {2  if (strs) {3    if (typeof strs === "object") {4      for (const s of strs) {5        console.log(s);6      }7    } else if (typeof strs === "string") {8      console.log(strs);9    }10  }11}12 13printAll("John Doe");14printAll(["John", "Doe"]);

`in` operator

typescript

1interface Square {2  kind: "square";3  size: number;4}5 6interface Rectangle {7  kind: "rectangle";8  width: number;9  height: number;10}11 12type Shape = Square | Rectangle;13 14function calculateArea(shape: Shape): number {15  if ("size" in shape) {16    // 'shape' is of type 'Square' here17    return shape.size * shape.size;18  } else {19    // 'shape' is of type 'Rectangle' here20    return shape.width * shape.height;21  }22}23 24const square: Square = { kind: "square", size: 5 };25const rectangle: Rectangle = { kind: "rectangle", width: 6, height: 4 };26console.log(calculateArea(square));27console.log(calculateArea(rectangle));

`instanceof` operator

typescript

1function logValue(x: Date | string) {2  if (x instanceof Date) {3    console.log(x.toUTCString());4  } else {5    console.log(x.toUpperCase());6  }7}8 9logValue("Sunday, 25th Dec");10logValue(new Date());

Type predicate

A type predicate is a way to assert the type of a variable within a conditional statement. It allows you to narrow down the type of a variable within a certain block of code, based on some condition.

typescript

1type Fish = { swim: () => void };2type Bird = { fly: () => void };3 4function isFish(pet: Fish | Bird): pet is Fish {5  return (pet as Fish).swim !== undefined;6}7 8function feedPet(pet: Fish | Bird) {9  if (isFish(pet)) {10    pet.swim();11    console.log("Fish food");12  } else {13    pet.fly();14    console.log("Bird food");15  }16}17 18const myFish: Fish = { swim: () => console.log("Fish is swimming") };19const myBird: Bird = { fly: () => console.log("Bird is flying") };20 21feedPet(myFish);22feedPet(myBird);

Discriminated Union & Exhaustive Checking

typescript

1interface Circle {2  kind: "circle";3  radius: number;4}5 6interface Square {7  kind: "square";8  side: number;9}10 11type Shape = Circle | Square;12 13function getShape(shape: Shape): string {14  if (shape.kind === "circle") {15    return "Circle";16  }17  return "Square";18}19 20function getArea(shape: Shape): number {21  switch (shape.kind) {22    case "circle":23      return Math.PI * shape.radius ** 2;24    case "square":25      return shape.side * shape.side;26    default:27      const _defaultShape: never = shape;28      return _defaultShape;29  }30}31 32const circle: Circle = {33  kind: "circle",34  radius: 2,35};36 37const square: Square = {38  kind: "square",39  side: 5,40};41 42console.log(getShape(circle));43console.log(getShape(square));44console.log(Number(getArea(circle).toFixed(2)));45console.log(Number(getArea(square).toFixed(2)));

Source

Every example in this post lives in a repository. Browse it, raise an issue, or send a fix.

View the repository

TypeScript Basics

Syntax

Arrow Functions

Default Value

Return Type

never

Assigning type to an object

Bad behaviour of objects

Combining types

readonly & "?"(optional)

Declaration Syntax

Extending/Implementing

Declaration Merging

Here’s the most basic class - an empty one:

Fields

Getters & Setters

Interfaces can be implemented by classes.

Inheritance

Abstract classes

Custom generic interface

Passing an array and using arrow functions

Extending a generic type

Generic class

in operator

instanceof operator

Type predicate

Discriminated Union & Exhaustive Checking

TypeScript Basics

Syntax

Arrow Functions

Default Value

Return Type

never

Assigning type to an object

Bad behaviour of objects

Combining types

readonly & "?"(optional)

Declaration Syntax

Extending/Implementing

Declaration Merging

Here’s the most basic class - an empty one:

Fields

Getters & Setters

Interfaces can be implemented by classes.

Inheritance

Abstract classes

Custom generic interface

Passing an array and using arrow functions

Extending a generic type

Generic class

in operator

instanceof operator

Type predicate

Discriminated Union & Exhaustive Checking

`in` operator

`instanceof` operator

`in` operator

`instanceof` operator