Back to Home
    TypeScriptTypeScript v5.0Intermediate

    TypeScript

    Type annotations, interfaces, generics, utility types, and advanced TypeScript patterns.

    12 min read
    typescripttypesinterfacesgenericsjavascript

    Basic Types

    2 topics

    Primitive Types

    TypeScript basic primitive types and type annotations

    typescript
    // Basic types
    let name: string = "John"
    let age: number = 30
    let isActive: boolean = true
    let value: any = "anything"
    
    // Arrays
    let numbers: number[] = [1, 2, 3]
    let names: Array<string> = ["Alice", "Bob"]
    
    // Tuple
    let tuple: [string, number] = ["hello", 10]
    
    // Enum
    enum Color { Red, Green, Blue }
    let color: Color = Color.Green

    💡 Use unknown instead of any when possible

    📌 const assertions create readonly literal types

    Type Aliases & Unions

    Create custom types with aliases and combine with unions

    typescript
    // Type alias
    type ID = string | number;
    
    // Union (one of)
    type Status = "active" | "inactive" | "pending";
    
    // Intersection (combine all)
    type Employee = Person & { company: string };
    
    // Literal types
    type Direction = "up" | "down" | "left" | "right";

    💡 Union (|) means one of these

    📌 Intersection (&) means all of these combined

    Interfaces

    1 topic

    Interface Declaration

    Define object shapes with interfaces

    typescript
    interface User {
      id: number;
      name: string;
      email?: string;        // Optional
      readonly createdAt: Date; // Cannot be changed
    }
    
    // Extending interfaces
    interface Admin extends User {
      permissions: string[];
    }
    
    // Index signatures
    interface Dictionary {
      [key: string]: string;
    }

    💡 Interfaces can be extended, types use intersection

    📌 Use readonly for immutable properties

    Generics

    1 topic

    Generic Functions & Types

    Write reusable code with type parameters

    typescript
    // Generic function
    function identity<T>(arg: T): T {
      return arg;
    }
    
    // Generic interface
    interface Box<T> {
      value: T;
    }
    
    // Constraints
    function getLength<T extends { length: number }>(item: T): number {
      return item.length;
    }
    
    // Multiple type params
    function pair<K, V>(key: K, value: V): [K, V] {
      return [key, value];
    }

    💡 Use constraints to limit generic types

    ⚡ Generics enable type-safe reusable code

    Utility Types

    1 topic

    Built-in Utility Types

    Transform types with TypeScript's built-in utilities

    typescript
    // Partial - all properties optional
    type PartialUser = Partial<User>;
    
    // Required - all properties required
    type RequiredUser = Required<User>;
    
    // Pick - select specific properties
    type UserName = Pick<User, "name" | "email">;
    
    // Omit - exclude properties
    type UserWithoutId = Omit<User, "id">;
    
    // Record - key-value mapping
    type Roles = Record<string, string[]>;
    
    // ReturnType
    type Fn = () => string;
    type Result = ReturnType<Fn>; // string

    💡 Combine utility types for complex transformations

    📌 Partial is great for update functions

    Related Articles

    Background reading and deeper explanations for this sheet.