TypeScript

Advanced Type Features (Not in JavaScript):

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

// Union Types
type StringOrNumber = string | number;

// Type Guards
function isString(value: any): value is string {
  return typeof value === "string";
}

// Intersection Types
interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}

interface ArtworksData {
  artworks: { title: string }[];
}

type ArtworksResponse = ArtworksData & ErrorHandling;
        

Advanced Type Safety Example:

// TypeScript allows modeling state machine transitions at the type level
type State = "idle" | "loading" | "success" | "error";

// Only certain transitions are allowed
type ValidTransitions = {
  idle: "loading";
  loading: "success" | "error";
  success: "idle";
  error: "idle";
};

// Function that enforces valid state transitions at compile time
function transition<S extends State, T extends State>(
  current: S,
  next: Extract<ValidTransitions[S], T>
): T {
  console.log(`Transitioning from ${current} to ${next}`);
  return next;
}

// This will compile:
let state: State = "idle";
state = transition(state, "loading");

// This will fail to compile:
// state = transition(state, "success"); // Error: "success" is not assignable to "loading"
        

Advanced Type Examples:

// Type literals
const exactValue: 42 = 42; // Type is literally the number 42
const status: "success" | "error" = "success"; // Union of string literals

// BigInt
const bigNumber: bigint = 9007199254740991n;

// Symbol with description
const uniqueKey: symbol = Symbol("entity-id");

// Binary/Octal/Hex
const binary: number = 0b1010; // 10 in decimal
const octal: number = 0o744;   // 484 in decimal
const hex: number = 0xA0F;     // 2575 in decimal

// Ensuring non-nullable
let userId: number; // Can be undefined before initialization
let requiredId: number = 1; // Must be initialized

// Working with null
function process(value: string | null): string {
    // Runtime check still required despite types
    return value === null ? "Default" : value;
}
        

Multidimensional Arrays:

// 2D array (matrix)
const matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6]
];

// Accessing elements
const element = matrix[0][1]; // 2

// 3D array
const cube: number[][][] = [
    [[1, 2], [3, 4]],
    [[5, 6], [7, 8]]
];
        

Readonly Arrays:

// Prevents mutations
const fixedNumbers: ReadonlyArray = [1, 2, 3];
// fixedNumbers.push(4); // Error: Property 'push' does not exist

// Alternative syntax
const altFixedNumbers: readonly number[] = [1, 2, 3];

// Type assertion with readonly
function processItems(items: readonly T[]): T[] {
    // Cannot modify items here
    return [...items, ...items]; // But can create new arrays
}
        

Optional Tuple Elements:

// Last element is optional
type OptionalTuple = [string, number, boolean?];

const complete: OptionalTuple = ["complete", 100, true];
const partial: OptionalTuple = ["partial", 50]; // Third element optional

// Multiple optional elements
type PersonRecord = [string, string, number?, Date?, string?];
    

Rest Elements in Tuples:

// Fixed start, variable end
type StringNumberBooleans = [string, number, ...boolean[]];
const snb1: StringNumberBooleans = ["hello", 42, true];
const snb2: StringNumberBooleans = ["world", 100, false, true, false];

// Fixed start and end with variable middle
type StartEndTuple = [number, ...string[], boolean];
const startEnd: StartEndTuple = [1, "middle", "parts", "can vary", true];
        

Readonly Tuples:

// Immutable tuple
type Point = readonly [number, number];
function distance(p1: Point, p2: Point): number {
    // p1 and p2 cannot be modified
    return Math.sqrt(Math.pow(p2[0] - p1[0], 2) + Math.pow(p2[1] - p1[1], 2));
}

// With const assertion
const origin = [0, 0] as const; // Type is readonly [0, 0]
        

Practical Pattern: Named Tuples

// Creating a more semantic tuple interface
interface Vector2D extends ReadonlyArray {
    0: number; // x coordinate
    1: number; // y coordinate
    length: 2;
}

function createVector(x: number, y: number): Vector2D {
    return [x, y] as Vector2D;
}

const vec = createVector(10, 20);
const x = vec[0]; // More clearly represents x coordinate
        

Basic Declaration:

interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}
    

interface ConfigOptions {
  readonly apiKey: string;        // Can't be changed after initialization
  timeout?: number;               // Optional property
  [propName: string]: any;        // Index signature for additional properties
}
    

interface SearchFunction {
  (source: string, subString: string): boolean;
}

const mySearch: SearchFunction = (src, sub) => src.includes(sub);
    

interface BaseEntity {
  id: number;
  createdAt: Date;
}

interface User extends BaseEntity {
  name: string;
  email: string;
}

// User now requires id, createdAt, name, and email
    

interface Printable {
  print(): void;
  getFormat(): string;
}

class Document implements Printable {
  // Must implement all methods
  print() {
    console.log("Printing document...");
  }
  
  getFormat(): string {
    return "PDF";
  }
}
    

interface Counter {
  (start: number): string;  // Function signature
  interval: number;         // Property
  reset(): void;            // Method
}

function createCounter(): Counter {
  const counter = ((start: number) => start.toString()) as Counter;
  counter.interval = 123;
  counter.reset = function() { console.log("Reset!"); };
  return counter;
}
    

interface Box {
  height: number;
  width: number;
}

interface Box {
  scale: number;
}

// Box now has all three properties
const box: Box = { height: 5, width: 6, scale: 10 };
    

// Interface augmentation
interface APIResponse {
  status: number;
}

// Later in code or in a different file:
interface APIResponse {
  data: unknown;
}

// Result: APIResponse has both status and data properties
const response: APIResponse = {
  status: 200,
  data: { result: "success" }
};

// Type aliases cannot be augmented
type User = {
  id: number;
};

// Error: Duplicate identifier 'User'
type User = {
  name: string;
};
    

// Mapped type (transforming one type to another)
type Readonly = {
  readonly [P in keyof T]: T[P];
};

// Conditional type
type ExtractPrimitive = T extends string | number | boolean ? T : never;

// Recursive type
type JSONValue = 
  | string 
  | number 
  | boolean 
  | null 
  | JSONValue[] 
  | { [key: string]: JSONValue };

// These patterns are difficult or impossible with interfaces
    

Library Design Pattern:

// Public API interfaces (augmentable by consumers)
export interface UserConfig {
  name: string;
  preferences?: UserPreferences;
}

export interface UserPreferences {
  theme: "light" | "dark";
}

// Internal implementation types (closed definitions)
type UserRecord = UserConfig & {
  _id: string;
  _created: Date;
  _computedPreferences: ProcessedPreferences;
};

type ProcessedPreferences = {
  [K in keyof UserPreferences]: UserPreferences[K];
} & {
  computedThemeClass: string;
};
    

Function Declaration with Types:

// Function declaration with parameter and return types
function calculate(x: number, y: number): number {
    return x + y;
}

// Function with object parameter using interface
interface UserData {
    id: number;
    name: string;
}

function processUser(user: UserData): boolean {
    // Process user data
    return true;
}
        

Function Types and Type Aliases:

// Function type alias
type BinaryOperation = (a: number, b: number) => number;

// Using the function type
const add: BinaryOperation = (x, y) => x + y;
const subtract: BinaryOperation = (x, y) => x - y;

// Function type with generic
type Transformer<T, U> = (input: T) => U;

const stringToNumber: Transformer<string, number> = (str) => parseInt(str, 10);
        

Function Overloads:

// Function overloads
function process(x: number): number;
function process(x: string): string;
function process(x: number | string): number | string {
    if (typeof x === "number") {
        return x * 2;
    } else {
        return x.repeat(2);
    }
}

// Usage
const num = process(10);    // Returns 20
const str = process("Hi");  // Returns "HiHi"
        

Callable Interface:

// Interface with call signature
interface SearchFunc {
    (source: string, subString: string): boolean;
    caseInsensitive?: boolean;
}

const search: SearchFunc = (src, sub) => {
    // Implementation
    return src.includes(sub);
};
search.caseInsensitive = true;
        

Generic Functions:

// Generic function
function firstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

// Constrained generic
function longest<T extends { length: number }>(a: T, b: T): T {
    return a.length >= b.length ? a : b;
}

// Usage
const longerArray = longest([1, 2], [1, 2, 3]);  // Returns [1, 2, 3]
const longerString = longest("abc", "defg");     // Returns "defg"
        

// TypeScript infers the callback parameter and return types
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);  // TypeScript knows n is number
                                          // and the result is number[]
        

Type Signatures with Optional Parameters:

// The signature treats config as: { timeout?: number, retries?: number }
function fetchData(url: string, config?: { timeout?: number; retries?: number }) {
    const timeout = config?.timeout ?? 5000;
    const retries = config?.retries ?? 3;
    
    // Implementation
}

// Parameter types under the hood
// title parameter is effectively of type (string | undefined)
function greet(name: string, title?: string) {
    // Implementation
}
        

Type System Behavior with Default Parameters:

// In the type system, count is still considered a number, not number|undefined
function repeat(text: string, count: number = 1): string {
    return text.repeat(count);
}

// Default values can use expressions
function getTimestamp(date: Date = new Date()): number {
    return date.getTime();
}

// Default parameters can reference previous parameters
function createRange(start: number = 0, end: number = start + 10): number[] {
    return Array.from({ length: end - start }, (_, i) => start + i);
}
        

Rest Parameters with Types:

// Rest parameters with TypeScript
function sum(...numbers: number[]): number {
    return numbers.reduce((total, n) => total + n, 0);
}

// Rest parameters with tuples
function createUser(name: string, age: number, ...skills: string[]): object {
    return { name, age, skills };
}
        

Required Parameters After Default Parameters:

// When a parameter with a default follows a required parameter
function sliceArray(
    array: number[], 
    start: number = 0, 
    end: number
): number[] {
    return array.slice(start, end);
}

// Must be called with undefined to use default value
sliceArray([1, 2, 3, 4], undefined, 2); // [1, 2]
        

Destructuring with Default and Optional Types:

// Object parameter with defaults and optional properties
function processConfig({
    timeout = 1000,
    retries = 3,
    callback,
    debug = false
}: {
    timeout?: number;
    retries?: number;
    callback: (result: any) => void;
    debug?: boolean;
}) {
    // Implementation
}

// Array destructuring with defaults
function getRange([start = 0, end = 10]: [number?, number?] = []): number[] {
    return Array.from({ length: end - start }, (_, i) => start + i);
}
        

Functional Programming with Optional Parameters:

// Partial application with default parameters
function multiply(a: number, b: number = 1): number {
    return a * b;
}

const double = (n: number) => multiply(n, 2);
const triple = (n: number) => multiply(n, 3);

// Higher-order function with optional configuration
function createLogger(prefix: string, options?: { 
    timestamp?: boolean;
    level?: "info" | "warn" | "error";
}) {
    return function(message: string) {
        const time = options?.timestamp ? new Date().toISOString() : "";
        const level = options?.level || "info";
        console.log(`${time} [${level}] ${prefix}: ${message}`);
    };
}

const appLogger = createLogger("APP", { timestamp: true });
        

Comprehensive Class Example:

// Base abstract class
abstract class Vehicle {
  // Static property
  static manufacturer: string = "Generic Motors";
  
  // Abstract method (must be implemented by deriving classes)
  abstract getDetails(): string;
  
  // Protected property accessible by derived classes
  protected _model: string;
  private _year: number;
  
  constructor(model: string, year: number) {
    this._model = model;
    this._year = year;
  }
  
  // Getter accessor
  get year(): number {
    return this._year;
  }
  
  // Method with implementation
  getAge(currentYear: number): number {
    return currentYear - this._year;
  }
}

// Interface for additional functionality
interface ElectricVehicle {
  batteryLevel: number;
  charge(amount: number): void;
}

// Derived class with interface implementation
class ElectricCar extends Vehicle implements ElectricVehicle {
  batteryLevel: number;
  
  constructor(model: string, year: number, batteryLevel: number = 100) {
    super(model, year);  // Call to parent constructor
    this.batteryLevel = batteryLevel;
  }
  
  // Implementation of abstract method
  getDetails(): string {
    return `${this._model} (${this.year}) - Battery: ${this.batteryLevel}%`;
  }
  
  charge(amount: number): void {
    this.batteryLevel = Math.min(100, this.batteryLevel + amount);
  }
  
  // Method overriding with super call
  getAge(currentYear: number): number {
    console.log("Calculating age for electric car");
    return super.getAge(currentYear);
  }
}

// Usage
const tesla = new ElectricCar("Model S", 2020, 90);
console.log(ElectricCar.manufacturer);  // Static access: "Generic Motors"
console.log(tesla.getDetails());        // "Model S (2020) - Battery: 90%"
tesla.charge(15);
console.log(tesla.batteryLevel);        // 100 (capped at maximum)
        

Comprehensive Example with Inheritance:

class Base {
  public publicProp = "accessible anywhere";
  protected protectedProp = "accessible in Base and derived classes";
  private privateProp = "accessible only in Base";
  #truePrivate = "hard private with runtime enforcement";
  
  constructor() {
    // All properties are accessible within the class
    this.publicProp;
    this.protectedProp;
    this.privateProp;
    this.#truePrivate;
  }
  
  public publicMethod(): void {
    console.log("Public method can be called from anywhere");
  }
  
  protected protectedMethod(): void {
    console.log("Protected method, available in Base and derived classes");
  }
  
  private privateMethod(): void {
    console.log("Private method, only available in Base");
  }
  
  public accessPrivateMembers(): void {
    // Private members are accessible inside their own class
    console.log(this.privateProp);
    this.privateMethod();
    console.log(this.#truePrivate);
  }
}

class Derived extends Base {
  constructor() {
    super();
    
    // Public and protected members are accessible in derived class
    console.log(this.publicProp);      // OK
    console.log(this.protectedProp);   // OK
    
    // Private members are not accessible in derived class
    // console.log(this.privateProp);  // Error: Property 'privateProp' is private
    // this.privateMethod();           // Error: Method 'privateMethod' is private
    // console.log(this.#truePrivate); // Error: Property '#truePrivate' is not accessible
    
    this.publicMethod();               // OK
    this.protectedMethod();            // OK
  }
  
  // Method override preserving visibility
  protected protectedMethod(): void {
    super.protectedMethod();
    console.log("Extended functionality in derived class");
  }
}

// Usage outside classes
const base = new Base();
const derived = new Derived();

// Public members accessible everywhere
console.log(base.publicProp);
base.publicMethod();
console.log(derived.publicProp);
derived.publicMethod();

// Protected and private members inaccessible outside their classes
// console.log(base.protectedProp);     // Error: 'protectedProp' is protected
// base.protectedMethod();              // Error: 'protectedMethod' is protected
// console.log(base.privateProp);       // Error: 'privateProp' is private
// base.privateMethod();                // Error: 'privateMethod' is private
// console.log(base.#truePrivate);      // Error: Property '#truePrivate' is not accessible
        

JavaScript Output for TypeScript Access Modifiers:

// TypeScript
class Example {
  public publicProp = 1;
  protected protectedProp = 2;
  private privateProp = 3;
  #truePrivate = 4;
}
        

Transpiles to:

// JavaScript (simplified)
class Example {
  constructor() {
    this.publicProp = 1;
    this.protectedProp = 2;
    this.privateProp = 3;
    this.#truePrivate = 4; // Note: This remains a true private field
  }
}
        

Discriminated Union Pattern:

// Each type in the union contains a common property with literal type
type ApiResponse =
  | { status: "success"; data: any; timestamp: number }
  | { status: "error"; error: Error; code: number }
  | { status: "loading" };

function handleResponse(response: ApiResponse) {
  // TypeScript can narrow down the type based on the discriminant
  switch (response.status) {
    case "success":
      // TypeScript knows we have `data` and `timestamp` here
      console.log(response.data, response.timestamp);
      break;
    case "error":
      // TypeScript knows we have `error` and `code` here
      console.log(response.error.message, response.code);
      break;
    case "loading":
      // TypeScript knows this is the loading state
      showLoadingSpinner();
      break;
  }
}
        

// Pick properties of a specific type from an interface
type PickType<T, U> = {
  [P in keyof T]: T[P] extends U ? P : never
}[keyof T];

interface User {
  id: number;
  name: string;
  isAdmin: boolean;
  createdAt: Date;
}

// Will distribute over the union of all properties
// and result in "isAdmin"
type BooleanProps = PickType<User, boolean>;
        

Mixin Implementation:

// Define class types (not instances)
type Constructor<T = {}> = new (...args: any[]) => T;

// Timestampable mixin
function Timestampable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    createdAt = new Date();
    updatedAt = new Date();
    
    update() {
      this.updatedAt = new Date();
    }
  };
}

// Identifiable mixin
function Identifiable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    id = Math.random().toString(36).substring(2);
  };
}

// Base class
class User {
  constructor(public name: string) {}
}

// Apply mixins using intersection types
const TimestampableUser = Timestampable(User);
const IdentifiableTimestampableUser = Identifiable(TimestampableUser);

// Instance has all properties from all mixins
const user = new IdentifiableTimestampableUser("Alice");
console.log(user.id, user.name, user.createdAt);
user.update();
console.log(user.updatedAt);
        

type A = { prop: string };
type B = { prop: number };

// The type of `prop` is `string & number`, which is `never`
// This makes objects of type `A & B` impossible to create
type AB = A & B;

// To solve this, use discriminated properties:
type A = { type: "a"; value: string };
type B = { type: "b"; value: number };

// Now we can safely use a union instead
type AorB = A | B;
        

// Example of TypeScript's control flow analysis
function process(value: string | number | undefined) {
  // Type of value: string | number | undefined
  
  if (value === undefined) {
    // Type of value: undefined
    return "No value";
  }
  
  // Type of value: string | number
  
  if (typeof value === "string") {
    // Type of value: string
    return value.toUpperCase();
  }
  
  // Type of value: number
  return value.toFixed(2);
}
        

// typeof type guards for JavaScript primitives
function handleValue(val: unknown) {
  if (typeof val === "string") {
    // string operations
  } else if (typeof val === "number") {
    // number operations
  } else if (typeof val === "boolean") {
    // boolean operations
  } else if (typeof val === "undefined") {
    // undefined handling
  } else if (typeof val === "object") {
    // null or object (be careful - null is also "object")
    if (val === null) {
      // null handling
    } else {
      // object operations
    }
  } else if (typeof val === "function") {
    // function operations
  } else if (typeof val === "symbol") {
    // symbol operations
  } else if (typeof val === "bigint") {
    // bigint operations
  }
}
        

// instanceof for class hierarchies
abstract class Vehicle {
  abstract move(): string;
}

class Car extends Vehicle {
  move() { return "driving"; }
  honk() { return "beep"; }
}

class Boat extends Vehicle {
  move() { return "sailing"; }
  horn() { return "hooooorn"; }
}

function getVehicleSound(vehicle: Vehicle): string {
  if (vehicle instanceof Car) {
    // TypeScript knows this is a Car
    return vehicle.honk();
  } else if (vehicle instanceof Boat) {
    // TypeScript knows this is a Boat
    return vehicle.horn();
  }
  return "unknown";
}
        

// "in" operator checks for property existence
interface Admin {
  name: string;
  privileges: string[];
}

interface Employee {
  name: string;
  startDate: Date;
}

type UnknownEmployee = Employee | Admin;

function printDetails(emp: UnknownEmployee) {
  console.log(`Name: ${emp.name}`);
  
  if ("privileges" in emp) {
    // TypeScript knows emp is Admin
    console.log(`Privileges: ${emp.privileges.join(", ")}`);
  }
  
  if ("startDate" in emp) {
    // TypeScript knows emp is Employee
    console.log(`Start Date: ${emp.startDate.toISOString()}`);
  }
}
        

// Using discriminants (tagged unions)
interface Square {
  kind: "square";
  size: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

type Shape = Square | Rectangle | Circle;

function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case "square":
      // TypeScript knows shape is Square
      return shape.size * shape.size;
    case "rectangle":
      // TypeScript knows shape is Rectangle
      return shape.width * shape.height;
    case "circle":
      // TypeScript knows shape is Circle
      return Math.PI * shape.radius ** 2;
    default:
      // Exhaustiveness check using never type
      const _exhaustiveCheck: never = shape;
      throw new Error(`Unexpected shape: ${_exhaustiveCheck}`);
  }
}
        

// Creating custom type guard functions
interface ApiResponse<T> {
  data?: T;
  error?: {
    message: string;
    code: number;
  };
}

// Type guard to check for success response
function isSuccessResponse<T>(response: ApiResponse<T>): response is ApiResponse<T> & { data: T } {
  return response.data !== undefined;
}

// Type guard to check for error response
function isErrorResponse<T>(response: ApiResponse<T>): response is ApiResponse<T> & { error: { message: string; code: number } } {
  return response.error !== undefined;
}

async function fetchUserData(): Promise<ApiResponse<User>> {
  // fetch implementation...
  return { data: { id: 1, name: "John" } };
}

async function processUserData() {
  const response = await fetchUserData();
  
  if (isSuccessResponse(response)) {
    // TypeScript knows response.data exists and is a User
    console.log(`User: ${response.data.name}`);
    return response.data;
  } else if (isErrorResponse(response)) {
    // TypeScript knows response.error exists
    console.error(`Error ${response.error.code}: ${response.error.message}`);
    throw new Error(response.error.message);
  } else {
    // Handle unexpected case
    console.warn("Response has neither data nor error");
    return null;
  }
}
        

// Assertion functions throw if condition isn't met
function assertIsString(val: any): asserts val is string {
  if (typeof val !== "string") {
    throw new Error(`Expected string, got ${typeof val}`);
  }
}

function processValue(value: unknown) {
  assertIsString(value);
  // TypeScript now knows value is a string
  return value.toUpperCase();
}

// Generic assertion function
function assertIsDefined<T>(value: T): asserts value is NonNullable<T> {
  if (value === undefined || value === null) {
    throw new Error(`Expected non-nullable value, got ${value}`);
  }
}

function processElement(element: HTMLElement | null) {
  assertIsDefined(element);
  // TypeScript knows element is HTMLElement (not null)
  element.classList.add("active");
}
        

// Using type queries and lookup types for precise narrowing
type EventMap = {
  click: { x: number; y: number; target: Element };
  keypress: { key: string; code: string };
  focus: { target: Element };
};

function handleEvent<K extends keyof EventMap>(
  eventName: K, 
  handler: (event: EventMap[K]) => void
) {
  // Implementation...
}

// TypeScript knows exactly which event object shape to expect
handleEvent("click", (event) => {
  console.log(`Clicked at ${event.x}, ${event.y}`);
});

handleEvent("keypress", (event) => {
  console.log(`Key pressed: ${event.key}`);
});
        

// Type guard for checking if object has a specific property with type
function hasProperty<T extends object, K extends string>(
  obj: T, 
  prop: K
): obj is T & Record<K, unknown> {
  return Object.prototype.hasOwnProperty.call(obj, prop);
}

interface User {
  id: number;
  name: string;
}

function processUser(user: User) {
  if (hasProperty(user, "email")) {
    // TypeScript knows user has an email property of unknown type
    // Need further refinement for exact type
    if (typeof user.email === "string") {
      // Now we know it's a string
      console.log(user.email.toLowerCase());
    }
  }
}
        

Multiple Type Parameters:

// Multiple generic type parameters
function pair<T, U>(first: T, second: U): [T, U] {
    return [first, second];
}

const result = pair("hello", 42);  // type: [string, number]
        

Generic Classes:

class DataContainer<T> {
    private data: T[];
    
    constructor(initialData: T[] = []) {
        this.data = initialData;
    }
    
    add(item: T): void {
        this.data.push(item);
    }
    
    getItems(): T[] {
        return this.data;
    }
    
    getItemAtIndex(index: number): T | undefined {
        return this.data[index];
    }
}

// Type safety enforced across usage
const numbers = new DataContainer<number>([1, 2, 3]);
numbers.add(4);          // Ok
// numbers.add("five");  // Error: Argument of type 'five' is not assignable to parameter of type 'number'
        

Generic Interfaces and Type Aliases:

// Generic interface
interface ApiResponse<T> {
    data: T;
    status: number;
    message: string;
    timestamp: number;
}

// Using generic interface
type UserData = { id: number; name: string };
type ProductData = { id: number; title: string; price: number };

function fetchUser(id: number): Promise<ApiResponse<UserData>> {
    // Implementation...
    return Promise.resolve({
        data: { id, name: "User" },
        status: 200,
        message: "Success",
        timestamp: Date.now()
    });
}

function fetchProduct(id: number): Promise<ApiResponse<ProductData>> {
    // Implementation with different return type but same structure
    return Promise.resolve({
        data: { id, title: "Product", price: 99.99 },
        status: 200,
        message: "Success",
        timestamp: Date.now()
    });
}
        

interface RequestConfig<T = any> {
    url: string;
    method: "GET" | "POST";
    data?: T;
}

// No need to specify type parameter, defaults to any
const basicConfig: RequestConfig = {
    url: "/api/data",
    method: "GET"
};

// Explicit type parameter
const postConfig: RequestConfig<{id: number}> = {
    url: "/api/update",
    method: "POST",
    data: { id: 123 }
};
        

1. Interface-Based Constraints:

interface HasId {
    id: number;
}

function retrieveById<T extends HasId>(entities: T[], id: number): T | undefined {
    return entities.find(entity => entity.id === id);
}

// Works with any object having an id property
const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
];

const products = [
    { id: 1, name: "Laptop", price: 1200 },
    { id: 2, name: "Phone", price: 800 }
];

const user = retrieveById(users, 1);       // Type: { id: number, name: string } | undefined
const product = retrieveById(products, 2); // Type: { id: number, name: string, price: number } | undefined
        

2. Multiple Constraints Using Intersection Types:

interface Printable {
    print(): void;
}

interface Loggable {
    log(message: string): void;
}

// T must satisfy both Printable AND Loggable interfaces
function processItem<T extends Printable & Loggable>(item: T): void {
    item.print();
    item.log("Item processed");
}

class AdvancedDocument implements Printable, Loggable {
    print() { console.log("Printing document..."); }
    log(message: string) { console.log(`LOG: ${message}`); }
    // Additional functionality...
}

// Works because AdvancedDocument implements both interfaces
processItem(new AdvancedDocument());
        

1. Using keyof for Property Constraints:

// T is any type, K must be a key of T
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const person = {
    name: "John",
    age: 30,
    address: "123 Main St"
};

// TypeScript knows the exact return types
const name = getProperty(person, "name");     // Type: string
const age = getProperty(person, "age");       // Type: number

// Compilation error - "email" is not a key of person
// const email = getProperty(person, "email");
        

2. Constraints with Default Types:

// T extends object with default type of any object
interface CacheOptions {
    expiry?: number;
    refresh?: boolean;
}

class Cache<T extends object = {}> {
    private data: Map<string, T> = new Map();
    private options: CacheOptions;
    
    constructor(options: CacheOptions = {}) {
        this.options = options;
    }
    
    set(key: string, value: T): void {
        this.data.set(key, value);
    }
    
    get(key: string): T | undefined {
        return this.data.get(key);
    }
}

// Uses default type (empty object)
const simpleCache = new Cache();
simpleCache.set("key1", {});

// Specific type
const userCache = new Cache<{id: number, name: string}>();
userCache.set("user1", {id: 1, name: "Alice"});
// userCache.set("user2", {name: "Bob"}); // Error: missing 'id' property
        

3. Factory Pattern with Generic Constraints:

interface Constructor<T> {
    new(...args: any[]): T;
}

class Entity {
    id: number;
    
    constructor(id: number) {
        this.id = id;
    }
}

// T must extend Entity, and we need a constructor for T
function createEntity<T extends Entity>(EntityClass: Constructor<T>, id: number): T {
    return new EntityClass(id);
}

class User extends Entity {
    name: string;
    
    constructor(id: number, name: string) {
        super(id);
        this.name = name;
    }
}

class Product extends Entity {
    price: number;
    
    constructor(id: number, price: number) {
        super(id);
        this.price = price;
    }
}

// TypeScript correctly types these based on the class passed
const user = createEntity(User, 1);       // Type: User
const product = createEntity(Product, 2); // Type: Product

// This would fail because string doesn't extend Entity
// createEntity(String, 3);
        

Workaround for Primitive Type Constraints:

// This doesn't directly constrain to number
// function processValue<T extends number>(value: T) { /* ... */ }

// Instead, use conditional types with distribution
type Numeric = number | bigint;

function processNumeric<T extends Numeric>(value: T): T {
    if (typeof value === 'number') {
        return (value * 2) as T; // Cast is needed
    } else if (typeof value === 'bigint') {
        return (value * 2n) as T; // Cast is needed
    }
    return value;
}

const num = processNumeric(42);     // Works with number
const big = processNumeric(42n);    // Works with bigint
// const str = processNumeric("42"); // Error: string not assignable to Numeric
        

1. Discriminated Unions:

type Success = {
  status: "success";
  data: unknown;
};

type Failure = {
  status: "error";
  error: string;
};

type ApiResponse = Success | Failure;

function handleResponse(response: ApiResponse) {
  if (response.status === "success") {
    // TypeScript knows response is Success type here
    console.log(response.data);
  } else {
    // TypeScript knows response is Failure type here
    console.log(response.error);
  }
}
        

2. Exhaustiveness Checking:

type Shape = 
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number }
  | { kind: "rectangle"; width: number; height: number };

function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.size ** 2;
    case "rectangle":
      return shape.width * shape.height;
    default:
      // This ensures all cases are handled
      const exhaustiveCheck: never = shape;
      return exhaustiveCheck;
  }
}
        

3. Type-Safe Event Systems:

const EVENTS = {
  USER_LOGIN: "user:login",
  USER_LOGOUT: "user:logout",
  CART_ADD: "cart:add",
  CART_REMOVE: "cart:remove"
} as const;

// Event payloads
type EventPayloads = {
  [EVENTS.USER_LOGIN]: { userId: string; timestamp: number };
  [EVENTS.USER_LOGOUT]: { userId: string };
  [EVENTS.CART_ADD]: { productId: string; quantity: number };
  [EVENTS.CART_REMOVE]: { productId: string };
};

// Type-safe event emitter
function emit(
  event: E, 
  payload: EventPayloads[E]
) {
  console.log(`Emitting ${event} with payload:`, payload);
}

// Type-safe usage
emit(EVENTS.USER_LOGIN, { userId: "123", timestamp: Date.now() });
// emit(EVENTS.CART_ADD, { productId: "456" }); // Error: missing quantity
        

Multiple Interface Extension:

interface Identifiable {
  id: string | number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface Resource extends Identifiable, Timestamped {
  name: string;
  owner: string;
}

// Resource now requires all members from both parent interfaces
const document: Resource = {
  id: "doc-123",
  name: "Important Report",
  owner: "Alice",
  createdAt: new Date("2023-01-15"),
  updatedAt: new Date("2023-03-20")
};
        

Conditional Extension with Generic Constraints:

interface BasicEntity {
  id: number;
}

interface WithTimestamps {
  createdAt: Date;
  updatedAt: Date;
}

// Conditional extension using generics and constraints
type EnhancedEntity<T extends BasicEntity> = T & WithTimestamps;

// Usage
interface User extends BasicEntity {
  name: string;
  email: string;
}

type TimestampedUser = EnhancedEntity<User>;

// TimestampedUser now has id, name, email, createdAt, and updatedAt
        

Declaration Merging with Method Overloading:

interface APIRequest {
  fetch(id: number): Promise<Record<string, any>>;
}

// Merged declaration - adds method overload
interface APIRequest {
  fetch(criteria: { [key: string]: any }): Promise<Record<string, any>[]>;
}

// Using the merged interface with overloaded methods
async function performRequest(api: APIRequest) {
  // Single item by ID
  const item = await api.fetch(123);
  
  // Multiple items by criteria
  const items = await api.fetch({ status: "active" });
}
        

Extending Third-Party Modules:

// Original library definition
// node_modules/some-lib/index.d.ts
declare module "some-lib" {
  export interface Options {
    timeout: number;
    retries: number;
  }
}

// Your application code
// augmentations.d.ts
declare module "some-lib" {
  export interface Options {
    logger?: (msg: string) => void;
    cacheResults?: boolean;
  }
}

// Usage after augmentation
import { Options } from "some-lib";

const options: Options = {
  timeout: 3000,
  retries: 3,
  logger: console.log,   // Added through augmentation
  cacheResults: true     // Added through augmentation
};
        

Type Compatibility Rules in Index Signatures:

interface StringIndexSignature {
  [key: string]: any;
  // All explicit properties must conform to the index signature
  length: number; // OK - number is assignable to 'any'
  name: string;   // OK - string is assignable to 'any'
}

interface RestrictedStringIndex {
  [key: string]: number;
  // length: string;  // Error: Property 'length' of type 'string' is not assignable to 'number'
  count: number;      // OK - matches index signature value type
  // title: boolean;  // Error: Property 'title' of type 'boolean' is not assignable to 'number'
}
        

Number and String Index Signatures Together:

interface MixedIndexes {
  [index: number]: string;
  [key: string]: string | number;
  // The number index return type must be assignable to the string index return type
}

// Valid implementation:
const validMix: MixedIndexes = {
  0: "zero",       // Numeric index returns string
  "count": 5,      // String index can return number
  "label": "test"  // String index can also return string
};

// Internal type representation (simplified):
// When accessing with numeric index: string
// When accessing with string index: string | number
        

Mapped Types with Index Signatures:

// Generic record type with typed keys and values
type Record<K extends string | number | symbol, T> = {
  [P in K]: T;
};

// Partial type that makes all properties optional
type Partial<T> = {
  [P in keyof T]?: T[P];
};

// Using mapped types with index signatures
interface ApiResponse {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

// Creates a type with the same properties but all strings
type StringifiedResponse = Record<keyof ApiResponse, string>;

// All properties become optional
type OptionalResponse = Partial<ApiResponse>;
        

Using Union Types with Index Signatures:

// Define known properties and allow additional dynamic ones
interface DynamicConfig {
  // Known specific properties
  endpoint: string;
  timeout: number;
  retries: number;
  
  // Dynamic properties with specific value types
  [key: string]: string | number | boolean;
}

const config: DynamicConfig = {
  endpoint: "https://api.example.com",
  timeout: 3000,
  retries: 3,
  // Dynamic properties
  enableLogging: true,
  cacheStrategy: "memory",
  maxConnections: 5
};

// Retrieve at runtime when property name isn't known in advance
function getValue(config: DynamicConfig, key: string): string | number | boolean | undefined {
  return config[key];
}
        

Using Symbol-Keyed Index Signatures:

// Symbol-keyed index signature
interface SymbolIndex {
  [key: symbol]: string;
}

// Usage with symbol keys
const nameSymbol = Symbol("name");
const idSymbol = Symbol("id");

const symbolObj: SymbolIndex = {};
symbolObj[nameSymbol] = "Alice";
symbolObj[idSymbol] = "123";

// This provides truly private properties since symbols are unique
        

Advanced Typed Access with Template Literals:

// Define possible prefixes and suffixes
type CSSPropertyPrefix = "margin" | "padding" | "border";
type CSSPropertySuffix = "Top" | "Right" | "Bottom" | "Left";

// Generate all combinations with template literals
type CSSProperty = `${CSSPropertyPrefix}${CSSPropertySuffix}`;

// Type-safe CSS properties object
interface CSSProperties {
  [prop: string]: string | number;
  
  // These specific properties are now auto-completed and type-checked
  marginTop: string | number;
  marginRight: string | number;
  // And all other generated combinations...
}

const styles: CSSProperties = {
  marginTop: "10px",
  borderBottom: "1px solid black",
  // The editor will suggest all valid combinations!
};
        

{
  "compilerOptions": {/* compiler settings */},
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"],
  "files": ["src/specific-file.ts"],
  "references": [
    { "path": "../otherproject" }
  ],
  "extends": "./base-tsconfig.json"
}
        

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@core/*": ["src/core/*"],
      "@utils/*": ["src/utils/*"],
      "@components/*": ["src/components/*"]
    }
  }
}
        

Root tsconfig.json:

{
  "files": [],
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/client" },
    { "path": "./packages/server" }
  ]
}
        

// Exporting
const utils = {
  add: (a: number, b: number): number => a + b
};
module.exports = utils;
// Alternative: exports.add = (a, b) => a + b;

// Importing
const utils = require('./utils');
const { add } = require('./utils');
        

// Exporting
export const add = (a: number, b: number): number => a + b;
export default class Calculator { /* ... */ }

// Importing - static
import { add } from './utils';
import Calculator from './utils';
import * as utils from './utils';

// Importing - dynamic
const mathModule = await import('./math.js');
        

// Defining a module
define('utils', ['dependency1', 'dependency2'], function(dep1, dep2) {
  return {
    add: (a: number, b: number): number => a + b
  };
});

// Using a module
require(['utils'], function(utils) {
  console.log(utils.add(1, 2));
});
        

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['dependency'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory(require('dependency'));
  } else {
    // Browser globals
    root.myModule = factory(root.dependency);
  }
}(typeof self !== 'undefined' ? self : this, function(dependency) {
  // Module implementation
  return {
    add: (a: number, b: number): number => a + b
  };
}));
        

// Configuration
System.config({
  map: {
    'lodash': 'node_modules/lodash/lodash.js'
  }
});

// Importing
System.import('./module.js').then(module => {
  module.doSomething();
});
        

{
  "compilerOptions": {
    "module": "esnext",          // Module emit format
    "moduleResolution": "node",  // Module resolution strategy
    "esModuleInterop": true,     // CommonJS/AMD/UMD to ESM interop
    "allowSyntheticDefaultImports": true,
    "target": "es2020",
    "lib": ["es2020", "dom"],
    "baseUrl": ".",
    "paths": {
      "@app/*": ["src/app/*"]
    }
  }
}
        

{
  "name": "my-library",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js",
      "types": "./dist/types/index.d.ts"
    },
    "./feature": {
      "import": "./dist/esm/feature.js",
      "require": "./dist/cjs/feature.js",
      "types": "./dist/types/feature.d.ts"
    }
  }
}