📌 The Complete Guide to TypeScript 🚀

Summary

This guide covers everything you need to master TypeScript, from primitive types and interfaces to advanced concepts like generics, decorators, and utility types.

Key points

1. 01

   Understand TypeScript’s type system.

2. 02

   Learn interfaces, type aliases, and records.

3. 03

   Explore utility types like Partial, Record, and Readonly.

4. 04

   Master generics, mapped types, and conditional types.

5. 05

   Learn about TypeScript’s object-oriented programming (OOP) features.

6. 06

   Implement decorators and metaprogramming techniques.

Example 01

📌 Primitive Types in TypeScript

TypeScript provides static typing for primitive types such as `boolean`, `number`, `string`, `bigint`, and `symbol`.

let isDone: boolean = true;
let age: number = 25;
let userName: string = "Alice";
let bigIntValue: bigint = 9007199254740991n;
let uniqueId: symbol = Symbol("id");

Example 02

📌 Arrays & Tuples

TypeScript supports typed arrays and tuples, which have a fixed number of elements with specific types.

let numbers: number[] = [1, 2, 3, 4];
let names: string[] = ["Alice", "Bob"];

let person: [string, number] = ["Alice", 30];

Example 03

📌 Interfaces vs Type Aliases

Interfaces and type aliases define object structures, but interfaces can be extended, whereas type aliases allow unions and intersections.

interface Person {
    name: string;
    age: number;
}

type Employee = {
    name: string;
    role: string;
};

Example 04

📌 Utility Types (Partial, Readonly, Record)

TypeScript offers utility types like `Partial`, `Readonly`, and `Record` to modify object properties dynamically.

type User = { name: string; age: number };

let partialUser: Partial<User> = { name: "Alice" };
let readonlyUser: Readonly<User> = { name: "Alice", age: 30 };

type UserRoles = Record<string, string>;

const roles: UserRoles = {
    admin: "Full Access",
    editor: "Edit Content",
};

Example 05

📌 Advanced Types (Mapped & Conditional Types)

Mapped types dynamically transform object structures, and conditional types allow type-based decisions.

type Optional<T> = { [P in keyof T]?: T[P] };
type IsString<T> = T extends string ? "Yes" : "No";

Example 06

📌 Generics in Functions & Classes

Generics enable reusable, type-safe functions and classes, making code more flexible and scalable.

function identity<T>(arg: T): T {
    return arg;
}

class Box<T> {
    content: T;
    constructor(value: T) {
        this.content = value;
    }
}

Example 07

📌 OOP in TypeScript: Classes & Inheritance

TypeScript supports object-oriented programming with classes, inheritance, access modifiers, and abstract classes.

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof!");
    }
}

Example 08

📌 Type Guards & Type Assertions

Type guards help narrow down types at runtime, while type assertions force TypeScript to treat a variable as a specific type.

function printId(id: string | number) {
    if (typeof id === "string") {
        console.log(id.toUpperCase());
    } else {
        console.log(id);
    }
}

Example 09

📌 Decorators & Metaprogramming

Decorators in TypeScript allow runtime modifications to classes, methods, and properties, commonly used in frameworks like Angular and NestJS.

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
    console.log(`Logging: ${key}`);
}

class Car {
    @Log
    start(): void {
        console.log("Car started");
    }
}

References

• TypeScript Official Documentation
• MDN TypeScript Guide

• JavaScript
• TypeScript
• Functional Programming
• OOP in TypeScript
• Decorators