📌 The Complete Guide to TypeScript 🚀
A deep dive into TypeScript types, interfaces, generics, utility types, OOP, decorators, and more.
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
Understand TypeScript’s type system.
Learn interfaces, type aliases, and records.
Explore utility types like Partial, Record, and Readonly.
Master generics, mapped types, and conditional types.
Learn about TypeScript’s object-oriented programming (OOP) features.
Implement decorators and metaprogramming techniques.
Code Examples
1. 📌 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");2. 📌 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];3. 📌 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;
};4. 📌 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",
};5. 📌 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";6. 📌 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;
}
}7. 📌 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!");
}
}8. 📌 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);
}
}9. 📌 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");
}
}