**Type 'string | undefined' is not assignable to type 'string'**

TypeScript's most frustrating error. Let's fix it properly.

## What This Means

You're trying to put a value somewhere, but TypeScript says "nope, wrong type".

```typescript
let name: string = getName(); // might return undefined
// Error: Type 'string | undefined' is not assignable to type 'string'
```

## Common Scenarios

**1. API Responses**
```typescript
interface User {
  name: string;
  email: string;
}

const user = await fetchUser(); // returns User | null
const name: string = user.name; // Error: user might be null
```

**2. Array Methods**
```typescript
const users: User[] = [];
const firstUser: User = users[0]; // might be undefined
```

**3. Object Properties**
```typescript
const config: { theme?: string } = {};
const theme: string = config.theme; // theme is optional
```

## Fix #1: Type Guards

```typescript
const user = await fetchUser();

if (user) {
  const name: string = user.name; // safe now
}
```

TypeScript knows inside the if-block, user exists.

## Fix #2: Non-Null Assertion (!)

```typescript
const name: string = user!.name;
```

Tells TypeScript "trust me, this won't be null". Use carefully.

Only use if you're 100% sure. Otherwise, runtime error.

## Fix #3: Nullish Coalescing

```typescript
const name: string = user?.name ?? 'Default';
```

Provides fallback if undefined/null.

## Fix #4: Type Assertion

```typescript
const name = user.name as string;
```

Forces TypeScript to treat it as string. Dangerous - use only when you know better than TypeScript.

## Fix #5: Update Type Definition

```typescript
// Instead of
let name: string;

// Use
let name: string | undefined;
```

Accepts the reality that it might be undefined.

## Real Example: Form Data

I had a form with optional fields:
```typescript
interface FormData {
  email: string;
  phone?: string;
}

function sendData(email: string, phone: string) {
  // API call
}

const form: FormData = getFormData();
sendData(form.email, form.phone); // Error on phone
```

**Solution 1:** Make phone optional in function
```typescript
function sendData(email: string, phone?: string) {
  // ...
}
```

**Solution 2:** Provide default
```typescript
sendData(form.email, form.phone ?? '');
```

**Solution 3:** Type guard
```typescript
if (form.phone) {
  sendData(form.email, form.phone);
}
```

## The 'any' Trap

Don't do this:
```typescript
const user: any = await fetchUser();
```

You just disabled TypeScript. Defeats the purpose.

## Union Types

```typescript
type Status = 'pending' | 'success' | 'error';

let status: Status = 'completed'; // Error
```

TypeScript says: "completed" isn't one of the allowed values.

**Fix:** Use correct value
```typescript
let status: Status = 'success';
```

## Discriminated Unions

Better error handling:
```typescript
type Result<T> = 
  | { success: true; data: T }
  | { success: false; error: string };

function handleResult(result: Result<User>) {
  if (result.success) {
    // TypeScript knows result.data exists here
    console.log(result.data.name);
  } else {
    // TypeScript knows result.error exists here
    console.log(result.error);
  }
}
```

## Generic Constraints

```typescript
function getValue<T>(obj: T, key: string): string {
  return obj[key]; // Error: can't index type T
}
```

**Fix with constraint:**
```typescript
function getValue<T extends Record<string, string>>(
  obj: T, 
  key: keyof T
): string {
  return obj[key];
}
```

## My Rule of Thumb

1. **Type Guard** - First choice, safest
2. **Nullish Coalescing** - When you have a sensible default
3. **Non-Null Assertion** - Only if you're certain
4. **Type Assertion** - Last resort
5. **any** - Never (okay, very rarely)

## Strict Mode

If you're not using strict mode:
```json
{
  "compilerOptions": {
    "strict": true
  }
}
```

Catches more errors early. Painful at first, saves you later.

## Bottom Line

TypeScript errors are annoying but they prevent runtime bugs. 

Don't fight TypeScript. Fix the actual type issue.

Took me months to stop using 'any' everywhere. Now my code has way fewer bugs.

TypeScript throwing type errors? Here's how to understand and fix 'Type X is not assignable to type Y' errors without using 'any'.

TypeScript: Type 'X' is Not Assignable to Type 'Y'

TypeScript is a programming language built on top of JavaScript.
  
  Simple idea:
  TypeScript = JavaScript + types.
  
  That means:
  - everything you can do in JavaScript, you can do in TypeScript
  - plus you get extra rules that catch mistakes early
  
  ## Why TypeScript was created
  JavaScript is very flexible.
  But flexibility also means:
  - bugs show up at runtime
  - large code becomes hard to understand
  - refactoring is risky
  
  TypeScript adds a type system so many errors are caught:
  - while writing code
  - before running the app
  
  ## JavaScript vs TypeScript (simple view)
  
  JavaScript:
  - dynamic
  - fast to start
  - errors appear when code runs
  
  TypeScript:
  - typed
  - safer
  - errors appear while coding
  
  ## Example: problem in JavaScript
  ```js
  function add(a, b) {
    return a + b;
  }
  
  add(10, "5"); // "105" unexpected
  ```
  
  ## Same idea in TypeScript
  ```ts
  function add(a: number, b: number): number {
    return a + b;
  }
  
  add(10, 5);     // OK
  add(10, "5");   // Error before running
  ```
  
  TypeScript warns you before the app even runs.
  
  ## Why TypeScript matters today (AI era too)
  Modern apps:
  - huge frontends (React, Angular, Vue)
  - APIs, cloud systems
  - AI pipelines and dashboards
  
  In such systems:
  - many developers work together
  - code lives for years
  - mistakes are expensive
  
  TypeScript helps by:
  - documenting intent through types
  - making code self-explanatory
  - enabling better AI code tools because structure is clear
  
  ## How TypeScript works
  You write .ts files.
  TypeScript compiler converts them into .js files.
  Browsers and Node.js run JavaScript, not TypeScript.
  
  ## Graph: TypeScript flow
  ```mermaid
  flowchart LR
    A[TypeScript code .ts] --> B[TypeScript Compiler]
    B --> C[JavaScript .js]
    C --> D[Browser / Node.js]
  ```
  
  ## Remember
  - TypeScript is JavaScript with safety
  - it catches errors early
  - it scales better for large projects
  

Purpose: build a clear foundation of what TypeScript is and why it exists. Benefit: you understand how TypeScript makes JavaScript safer, more predictable, and easier to maintain in real projects.

TypeScript Intro

Many beginners ask: why not just use JavaScript?
  
  ## JavaScript is great, but
  As projects grow:
  - files increase
  - logic becomes complex
  - bugs hide in corners
  
  JavaScript does not tell you:
  - what shape data should have
  - what a function expects
  - what it returns
  
  ## TypeScript gives answers
  With types, code becomes self-explanatory.
  
  ```ts
  function getUser(id: number): { name: string; age: number } {
    return { name: "Tom", age: 25 };
  }
  ```
  
  Anyone reading this knows:
  - id must be a number
  - result has name and age
  
  ## Benefits in real teams
  - fewer runtime crashes
  - easier refactoring
  - better IDE support
  - safer onboarding for new developers
  
  ## AI tools and TypeScript
  AI code tools work better when:
  - types describe intent
  - structures are clear
  - APIs are explicit
  
  That makes TypeScript very friendly for AI-assisted development.
  
  ## Remember
  - JavaScript is flexible
  - TypeScript is disciplined
  - discipline saves time in big projects
  

Purpose: understand when and why TypeScript is a better choice than plain JavaScript. Benefit: you can decide confidently for real projects.

Why TypeScript over JavaScript

Before coding, we need setup.
  
  ## Step 1: Install Node.js
  TypeScript runs on Node.js.
  Download from nodejs.org.
  
  ## Step 2: Install TypeScript compiler
  ```bash
  npm install -g typescript
  ```
  
  Check:
  ```bash
  tsc -v
  ```
  
  ## Step 3: First TypeScript file
  Create file: app.ts
  
  ```ts
  let message: string = "Hello TypeScript";
  console.log(message);
  ```
  
  ## Step 4: Compile to JavaScript
  ```bash
  tsc app.ts
  ```
  
  This creates app.js.
  
  Run:
  ```bash
  node app.js
  ```
  
  ## tsconfig.json (project setup)
  ```bash
  tsc --init
  ```
  
  This creates tsconfig.json which controls:
  - target JS version
  - strict mode
  - module system
  
  ## Graph: build cycle
  ```mermaid
  flowchart LR
    A[Write app.ts] --> B[tsc]
    B --> C[app.js]
    C --> D[node]
  ```
  
  ## Remember
  - write .ts
  - compile to .js
  - run JavaScript
  

Purpose: get a working TypeScript environment. Benefit: you can compile and run your first TypeScript program with confidence.

Setting Up TypeScript

Types describe what kind of data a variable holds.
  
  ## Common basic types
  - number
  - string
  - boolean
  - any
  - unknown
  
  ```ts
  let age: number = 25;
  let name: string = "Tom";
  let active: boolean = true;
  ```
  
  ## any (avoid if possible)
  ```ts
  let data: any = 10;
  data = "hello";
  data = true;
  ```
  
  any removes safety.
  
  ## unknown (safer than any)
  ```ts
  let value: unknown = "text";
  
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  }
  ```
  
  ## Arrays
  ```ts
  let scores: number[] = [10, 20, 30];
  let names: Array<string> = ["Tom", "Sarah"];
  ```
  
  ## Tuple
  ```ts
  let user: [number, string] = [1, "Tom"];
  ```
  
  ## Remember
  - types explain intent
  - avoid any
  - use unknown when unsure
  

Purpose: learn core TypeScript types. Benefit: you stop guessing about data and start writing clear, safe code.

Basic Types

Functions become much safer with types.
  
  ## Typed parameters and return
  ```ts
  function add(a: number, b: number): number {
    return a + b;
  }
  ```
  
  ## Void return
  ```ts
  function log(msg: string): void {
    console.log(msg);
  }
  ```
  
  ## Optional parameters
  ```ts
  function greet(name: string, title?: string): string {
    return title ? `${title} ${name}` : name;
  }
  ```
  
  ## Default values
  ```ts
  function power(base: number, exp: number = 2): number {
    return base ** exp;
  }
  ```
  
  ## Arrow functions
  ```ts
  const multiply = (a: number, b: number): number => a * b;
  ```
  
  ## Remember
  - always type inputs
  - specify return when possible
  - optional params use ?
  

Purpose: write safe functions. Benefit: no more confusion about inputs and outputs.

Functions and Return Types

Interfaces and types describe object shapes.
  
  ## Interface
  ```ts
  interface User {
    id: number;
    name: string;
    active: boolean;
  }
  ```
  
  Use it:
  ```ts
  const user: User = {
    id: 1,
    name: "Tom",
    active: true,
  };
  ```
  
  ## Type alias
  ```ts
  type Product = {
    id: number;
    price: number;
  };
  ```
  
  ## Differences (simple)
  - interface: extendable, good for objects
  - type: flexible, unions, primitives
  
  ## Union types
  ```ts
  type ID = number | string;
  
  let uid: ID = 10;
  uid = "A10";
  ```
  
  ## Remember
  - interfaces for object contracts
  - type for flexible compositions
  

Purpose: model real data shapes. Benefit: your objects become predictable and self-documented.

Interfaces and Type Aliases

Classes combine data and behavior.
  
  ## Basic class
  ```ts
  class Person {
    name: string;
    age: number;
  
    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }
  
    greet(): string {
      return `Hello, I am ${this.name}`;
    }
  }
  
  const p = new Person("Tom", 25);
  console.log(p.greet());
  ```
  
  ## Access modifiers
  ```ts
  class Account {
    public owner: string;
    private balance: number;
  
    constructor(owner: string, balance: number) {
      this.owner = owner;
      this.balance = balance;
    }
  
    getBalance(): number {
      return this.balance;
    }
  }
  ```
  
  ## Inheritance
  ```ts
  class Admin extends Person {
    role: string = "admin";
  }
  ```
  
  ## Remember
  - public, private, protected control access
  - classes become safer with types
  

Purpose: build structured objects with safety. Benefit: clearer OOP code with enforced rules.

Classes in TypeScript

Generics let you write code that works with many types safely.
  
  ## Simple generic function
  ```ts
  function identity<T>(value: T): T {
    return value;
  }
  
  identity<number>(10);
  identity<string>("hello");
  ```
  
  ## Generic array function
  ```ts
  function first<T>(arr: T[]): T {
    return arr[0];
  }
  
  first([1, 2, 3]);
  first(["a", "b"]);
  ```
  
  ## Generic interface
  ```ts
  interface ApiResponse<T> {
    data: T;
    status: number;
  }
  
  const res: ApiResponse<string> = {
    data: "ok",
    status: 200,
  };
  ```
  
  ## Graph: generics idea
  ```mermaid
  flowchart LR
    A[Generic T] --> B[Used with number]
    A --> C[Used with string]
    A --> D[Used with objects]
  ```
  
  ## Remember
  - generics = reusable + safe
  - avoid repeating same logic for many types
  

Purpose: write reusable, type-safe code. Benefit: flexibility without losing safety.

Generics Basics

TypeScript often infers types automatically.
  
  ## Inference
  ```ts
  let count = 10;   // inferred as number
  let title = "Hi"; // inferred as string
  ```
  
  You do not always need to write types.
  
  ## Strict mode
  In tsconfig.json:
  ```json
  {
    "compilerOptions": {
      "strict": true
    }
  }
  ```
  
  Strict mode:
  - prevents undefined mistakes
  - enforces better typing
  - catches more bugs
  
  ## Example
  ```ts
  let userName: string;
  userName = "Tom";
  // userName = null; // error in strict mode
  ```
  
  ## Remember
  - inference reduces noise
  - strict mode increases safety
  - both together are powerful
  

Purpose: understand how TypeScript guesses types and how strict mode protects you. Benefit: less typing, more safety.

Type Inference and Strict Mode

You do not need to abandon JavaScript to use TypeScript.
  
  ## Using JS files in TS project
  You can mix:
  - .ts files
  - .js files
  
  TypeScript understands JS.
  
  ## Installing type definitions
  Many JS libraries provide types via DefinitelyTyped.
  
  Example:
  ```bash
  npm install lodash
  npm install --save-dev @types/lodash
  ```
  
  ## Using the library
  ```ts
  import _ from "lodash";
  
  const nums = [1, 2, 3];
  const doubled = _.map(nums, n => n * 2);
  ```
  
  Now you get:
  - autocomplete
  - type checking
  
  ## Gradual migration idea
  Start with:
  - allowJs: true in tsconfig
  - convert files slowly from .js to .ts
  
  ## Remember
  - TypeScript works with JS ecosystem
  - types give safety on top of JS libraries
  - migration can be gradual
  

Purpose: use TypeScript with existing JavaScript code and libraries. Benefit: you can migrate gradually without rewriting everything.

TypeScript with JavaScript Libraries

In JavaScript, many bugs happen because values are missing.
      
      TypeScript helps you **handle missing values safely**.
      
      ## What are null and undefined?
      
      - undefined: value not assigned
      - null: intentionally empty
      
      ```ts
      let a: number;
      console.log(a); // undefined
      
      let b: number | null = null;
      ```
      
      ## The problem in JavaScript
      
      ```ts
      let name = null;
      console.log(name.length); // crash at runtime
      ```
      
      ## TypeScript safety
      
      ```ts
      let name: string | null = null;
      // name.length ❌ error
      if (name) {
        console.log(name.length); // safe
      }
      ```
      
      ## strictNullChecks
      
      When enabled:
      - null/undefined must be handled explicitly
      - prevents runtime crashes
      
      ## Optional chaining
      
      ```ts
      type User = { profile?: { email: string } };
      
      const user: User = {};
      console.log(user.profile?.email); // undefined, safe
      ```
      
      ## Graph
      
      ```mermaid
      flowchart LR
        A[Value] --> B{null/undefined?}
        B -->|Yes| C[Handle safely]
        B -->|No| D[Use value]
      ```
      
      ## Remember
      - Always handle null/undefined
      - Use strictNullChecks
      - Optional chaining avoids crashes
      

Learn how TypeScript handles null and undefined, why they cause bugs in JavaScript, and how strictNullChecks keeps your code safe.

TypeScript Null and Undefined

Union types let a variable hold **more than one type**.
      
      ## Why needed?
      In real apps, data is not always one shape.
      
      ## Example
      
      ```ts
      let id: number | string;
      
      id = 10;
      id = "A12";
      ```
      
      ## Using unions in functions
      
      ```ts
      function printId(id: number | string) {
        console.log(id);
      }
      ```
      
      ## Narrowing
      
      ```ts
      function printId(id: number | string) {
        if (typeof id === "string") {
          console.log(id.toUpperCase());
        } else {
          console.log(id.toFixed(2));
        }
      }
      ```
      
      ## With null
      
      ```ts
      let username: string | null = null;
      ```
      
      ## Graph
      
      ```mermaid
      flowchart TD
        A[Union Type] --> B[string]
        A --> C[number]
      ```
      
      ## Remember
      - Use unions for flexible APIs
      - Always narrow before using
      

Understand union types to allow multiple possible types for a value and write flexible yet safe code.

TypeScript Union Types

Literal types mean: value must be **exact**.
      
      ## Example
      
      ```ts
      let status: "loading" | "success" | "error";
      
      status = "loading"; // ok
      // status = "done"; ❌ error
      ```
      
      ## Why useful?
      Prevents invalid states.
      
      ```ts
      type Role = "admin" | "user";
      
      function setRole(role: Role) {
        console.log(role);
      }
      ```
      
      ## With numbers
      
      ```ts
      type Dice = 1 | 2 | 3 | 4 | 5 | 6;
      ```
      
      ## Graph
      
      ```mermaid
      flowchart LR
        A[status] --> B[loading]
        A --> C[success]
        A --> D[error]
      ```
      
      ## Remember
      - Literal types lock values
      - Great for states and configs
      

Learn literal types to restrict values to exact strings or numbers, useful for configs and API states.

TypeScript Literal Types

Enums group related constant values.
      
      ## Why enums?
      Avoid magic strings/numbers.
      
      ## Numeric enum
      
      ```ts
      enum Direction {
        Up,
        Down,
        Left,
        Right
      }
      
      let move: Direction = Direction.Up;
      ```
      
      ## String enum
      
      ```ts
      enum Status {
        Loading = "loading",
        Success = "success",
        Error = "error"
      }
      ```
      
      ## Using enum
      
      ```ts
      function setStatus(s: Status) {
        console.log(s);
      }
      
      setStatus(Status.Success);
      ```
      
      ## Enum vs union literals
      Union is lighter, enum is structured.
      Choose based on style and needs.
      
      ## Graph
      
      ```mermaid
      flowchart TD
        A[Status] --> B[Loading]
        A --> C[Success]
        A --> D[Error]
      ```
      
      ## Remember
      - Enums represent fixed options
      - Improve readability
      

Use enums to define named constants and make your code more readable and less error-prone.

TypeScript Enums

Type guards tell TypeScript: what type you have right now.
      
      ## typeof guard
      
      ```ts
      function print(val: number | string) {
        if (typeof val === "string") {
          console.log(val.toUpperCase());
        } else {
          console.log(val.toFixed(2));
        }
      }
      ```
      
      ## instanceof guard
      
      ```ts
      class User {
        name = "Tom";
      }
      
      function check(x: User | Date) {
        if (x instanceof User) {
          console.log(x.name);
        } else {
          console.log(x.getFullYear());
        }
      }
      ```
      
      ## Custom type guard
      
      ```ts
      type Cat = { meow: () => void };
      type Dog = { bark: () => void };
      
      function isCat(pet: Cat | Dog): pet is Cat {
        return (pet as Cat).meow !== undefined;
      }
      ```
      
      ## Graph
      
      ```mermaid
      flowchart TD
        A[Union] --> B{Check}
        B -->|string| C[String branch]
        B -->|number| D[Number branch]
      ```
      
      ## Remember
      - Guards make unions usable
      - Prevent runtime mistakes
      

Learn how to narrow union types safely using typeof, instanceof, and custom type guards.

Type Guards and Narrowing

Functions are core of every app. TypeScript makes them safe.
      
      ## Basic typing
      
      ```ts
      function add(a: number, b: number): number {
        return a + b;
      }
      ```
      
      ## Optional params
      
      ```ts
      function greet(name: string, age?: number) {
        console.log(name, age);
      }
      ```
      
      ## Default params
      
      ```ts
      function greet(name: string = "Guest") {
        console.log(name);
      }
      ```
      
      ## Function type variable
      
      ```ts
      let calc: (a: number, b: number) => number;
      
      calc = (x, y) => x + y;
      ```
      
      ## Remember
      - Always type parameters and returns
      - Makes APIs predictable
      

Define function signatures with types, optional parameters, default values, and return types for safe APIs.

TypeScript Function Types

Interfaces describe object shapes.
      
      ## Basic
      
      ```ts
      interface User {
        id: number;
        name: string;
      }
      ```
      
      ## Optional & readonly
      
      ```ts
      interface User {
        readonly id: number;
        name: string;
        email?: string;
      }
      ```
      
      ## Extend interface
      
      ```ts
      interface Admin extends User {
        role: "admin";
      }
      ```
      
      ## Implement in class
      
      ```ts
      class Person implements User {
        constructor(public id: number, public name: string) {}
      }
      ```
      
      ## Graph
      
      ```mermaid
      flowchart TD
        A[User] --> B[Admin extends]
      ```
      
      ## Remember
      - Interfaces define contracts
      - Great for APIs and models
      

Go deeper into interfaces: optional props, readonly, extension, and implementing interfaces in classes.

TypeScript Interfaces Deep

Type aliases give names to complex types.
      
      ## Basic
      
      ```ts
      type ID = number | string;
      let userId: ID = 101;
      ```
      
      ## Object alias
      
      ```ts
      type User = {
        id: ID;
        name: string;
      };
      ```
      
      ## Intersection
      
      ```ts
      type A = { a: number };
      type B = { b: number };
      type C = A & B;
      
      let obj: C = { a: 1, b: 2 };
      ```
      
      ## Type vs Interface
      - Type: unions, primitives
      - Interface: object shapes, extension
      
      ## Remember
      - Use type for flexibility
      - Combine with unions/intersections
      

Use type aliases to create reusable custom types and combine them with unions and intersections.

TypeScript Type Aliases

Arrays and tuples store multiple values.
      
      ## Typed array
      
      ```ts
      let nums: number[] = [1, 2, 3];
      let names: Array<string> = ["Tom", "Sarah"];
      ```
      
      ## Tuple (fixed structure)
      
      ```ts
      let user: [number, string] = [1, "Tom"];
      ```
      
      ## Tuple with labels
      
      ```ts
      let point: [x: number, y: number] = [10, 20];
      ```
      
      ## Use case
      Tuples for fixed formats, arrays for lists.
      
      ## Remember
      - Arrays: same type items
      - Tuples: fixed order & types
      

Type arrays and tuples correctly to ensure element safety and fixed-length data structures.

TypeScript Arrays and Tuples

Readonly prevents modification after creation.
      
      ## Readonly property
      
      ```ts
      interface User {
        readonly id: number;
        name: string;
      }
      ```
      
      ## Readonly array
      
      ```ts
      let nums: readonly number[] = [1, 2, 3];
      // nums.push(4); ❌
      ```
      
      ## Readonly utility
      
      ```ts
      type User = { id: number; name: string };
      type ReadUser = Readonly<User>;
      ```
      
      ## Why important?
      - Prevents bugs
      - Makes intent clear
      
      ## Graph
      
      ```mermaid
      flowchart LR
        A[Mutable] --> B[Can change]
        C[Readonly] --> D[Safe state]
      ```
      
      ## Remember
      - Use readonly for safety
      - Especially for configs and state
      

Learn how readonly helps prevent accidental changes and write safer, predictable TypeScript code.

TypeScript Readonly and Immutability

Generics let you write code that works with many types, but still stays type-safe.
        
        ## Why generics?
        Without generics:
        ```ts
        function identity(value: any): any {
          return value;
        }
        ```
        You lose type safety.
        
        With generics:
        ```ts
        function identity<T>(value: T): T {
          return value;
        }
        
        const a = identity<number>(10);
        const b = identity("hello");
        ```
        
        TypeScript remembers the type.
        
        ## Generic with arrays
        ```ts
        function first<T>(arr: T[]): T {
          return arr[0];
        }
        
        first([1, 2, 3]);
        first(["a", "b"]);
        ```
        
        ## Graph
        ```mermaid
        flowchart TD
          A[Generic Function] --> B[T = number]
          A --> C[T = string]
        ```
        
        ## Remember
        - Generics = flexible + safe
        - Avoid any when generics fit
        

Learn generics to write reusable, type-safe functions and classes without losing flexibility.

TypeScript Generics Intro

Sometimes you want generics, but with rules.
        
        ## Example: must have length
        
        ```ts
        function logLength<T extends { length: number }>(val: T): T {
          console.log(val.length);
          return val;
        }
        
        logLength("hello");
        logLength([1, 2, 3]);
        // logLength(10); ❌
        ```
        
        ## With interfaces
        
        ```ts
        interface HasId {
          id: number;
        }
        
        function printId<T extends HasId>(obj: T) {
          console.log(obj.id);
        }
        ```
        
        ## Why constraints?
        So TypeScript knows what properties exist.
        
        ## Graph
        ```mermaid
        flowchart TD
          A[T] --> B{extends rule}
          B --> C[Allowed]
          B --> D[Rejected]
        ```
        
        ## Remember
        - Use extends to limit generics
        - Keeps flexibility with safety
        

Restrict generics using constraints so you can safely access properties while keeping flexibility.

Generic Constraints

Generics also work with classes.
        
        ## Example: Box
        
        ```ts
        class Box<T> {
          value: T;
        
          constructor(val: T) {
            this.value = val;
          }
        
          get(): T {
            return this.value;
          }
        }
        
        const numBox = new Box<number>(10);
        const strBox = new Box("hello");
        ```
        
        ## Example: Generic stack
        
        ```ts
        class Stack<T> {
          private items: T[] = [];
        
          push(item: T) {
            this.items.push(item);
          }
        
          pop(): T | undefined {
            return this.items.pop();
          }
        }
        ```
        
        ## Graph
        ```mermaid
        flowchart TD
          A[Stack<T>] --> B[T = number]
          A --> C[T = string]
        ```
        
        ## Remember
        - Generic classes adapt to types
        - Great for reusable utilities
        

Build reusable data structures and services using generic classes.

Generic Classes

These operators help you create types from values.
        
        ## typeof
        
        ```ts
        const user = { id: 1, name: "Tom" };
        type User = typeof user;
        ```
        
        Now User is { id: number; name: string }
        
        ## keyof
        
        ```ts
        type UserKeys = keyof User; // "id" | "name"
        ```
        
        ## Use together
        
        ```ts
        function getProp<T, K extends keyof T>(obj: T, key: K) {
          return obj[key];
        }
        
        getProp(user, "name");
        // getProp(user, "age"); ❌
        ```
        
        ## Graph
        ```mermaid
        flowchart LR
          A[Object] --> B[typeof]
          B --> C[Type]
          C --> D[keyof]
          D --> E[Union of keys]
        ```
        
        ## Remember
        - typeof turns value into type
        - keyof gives safe property names
        

Use keyof and typeof to build types from existing objects and make safer APIs.

TypeScript keyof and typeof

TypeScript gives tools to transform types.
        
        ## Base type
        ```ts
        type User = {
          id: number;
          name: string;
          email: string;
        };
        ```
        
        ## Partial
        ```ts
        type UserDraft = Partial<User>;
        ```
        
        ## Required
        ```ts
        type FullUser = Required<UserDraft>;
        ```
        
        ## Pick
        ```ts
        type UserPreview = Pick<User, "id" | "name">;
        ```
        
        ## Omit
        ```ts
        type UserNoEmail = Omit<User, "email">;
        ```
        
        ## Record
        ```ts
        type Scores = Record<string, number>;
        ```
        
        ## Graph
        ```mermaid
        flowchart TD
          A[User] --> B[Partial]
          A --> C[Pick]
          A --> D[Omit]
        ```
        
        ## Remember
        - Utility types reshape types
        - Avoid rewriting similar types
        

Master built-in utility types like Partial, Required, Pick, Omit, and Record to transform types easily.

TypeScript Utility Types

Mapped types let you create new types from existing ones.
        
        ## Basic mapped type
        
        ```ts
        type Flags<T> = {
          [K in keyof T]: boolean;
        };
        
        type User = { id: number; name: string };
        type UserFlags = Flags<User>;
        ```
        
        UserFlags becomes:
        { id: boolean; name: boolean }
        
        ## Make all readonly
        
        ```ts
        type ReadonlyType<T> = {
          readonly [K in keyof T]: T[K];
        };
        ```
        
        ## Graph
        ```mermaid
        flowchart LR
          A[keyof T] --> B[Loop keys]
          B --> C[New type]
        ```
        
        ## Remember
        - Mapped types transform properties
        - Used in many utility types
        

Learn mapped types to build new types by looping over keys of existing ones.

TypeScript Mapped Types

Conditional types work like type-level if/else.
        
        ## Syntax
        ```ts
        T extends U ? X : Y
        ```
        
        ## Example
        
        ```ts
        type IsString<T> = T extends string ? true : false;
        
        type A = IsString<string>; // true
        type B = IsString<number>; // false
        ```
        
        ## Practical example
        
        ```ts
        type ApiResult<T> = T extends Error ? { ok: false } : { ok: true; data: T };
        ```
        
        ## Graph
        ```mermaid
        flowchart TD
          A[T] --> B{extends?}
          B -->|Yes| C[Type X]
          B -->|No| D[Type Y]
        ```
        
        ## Remember
        - Conditional types adapt APIs
        - Powerful for libraries
        

Use conditional types to select types based on conditions, similar to if/else for types.

Conditional Types

infer lets you extract a type from another type.
        
        ## Example: get return type
        
        ```ts
        type MyReturn<T> = T extends (...args: any[]) => infer R ? R : never;
        
        type R1 = MyReturn<() => number>; // number
        type R2 = MyReturn<(x: string) => boolean>; // boolean
        ```
        
        ## Extract array item type
        
        ```ts
        type Item<T> = T extends (infer U)[] ? U : T;
        
        type A = Item<number[]>; // number
        type B = Item<string>;  // string
        ```
        
        ## Graph
        ```mermaid
        flowchart LR
          A[Complex Type] --> B[infer]
          B --> C[Extracted Type]
        ```
        
        ## Remember
        - infer works only in conditional types
        - Used in many built-in helpers
        

Learn how infer extracts types inside conditional types to build advanced reusable helpers.

Infer Keyword

Large projects need structure.
        
        ## ES Modules (preferred)
        
        file math.ts:
        ```ts
        export function add(a: number, b: number) {
          return a + b;
        }
        ```
        
        file app.ts:
        ```ts
        import { add } from "./math";
        console.log(add(2, 3));
        ```
        
        ## Namespaces (older style)
        
        ```ts
        namespace Utils {
          export function log(msg: string) {
            console.log(msg);
          }
        }
        
        Utils.log("hello");
        ```
        
        ## When to use
        - Use modules for modern apps
        - Namespaces only for legacy/global scripts
        
        ## Graph
        ```mermaid
        flowchart LR
          A[Files] --> B[Exports]
          B --> C[Imports]
        ```
        
        ## Remember
        - Prefer ES modules
        - Keep code split by feature
        

Organize code using ES modules and understand when namespaces are still useful.

TypeScript Modules and Namespaces

tsconfig.json controls how TypeScript works.
        
        ## Why tsconfig?
        - compiler behavior
        - strictness
        - build output
        
        ## Basic example
        
        ```json
        {
          "compilerOptions": {
            "target": "ES2020",
            "module": "ESNext",
            "strict": true,
            "outDir": "./dist"
          },
          "include": ["src"]
        }
        ```
        
        ## Important options
        - strict: turn on all safety checks
        - noImplicitAny: forbid implicit any
        - strictNullChecks: handle null safely
        - outDir: output folder
        
        ## Graph
        ```mermaid
        flowchart TD
          A[tsconfig.json] --> B[Compiler]
          B --> C[JS Output]
        ```
        
        ## Remember
        - Always use strict: true
        - tsconfig defines project rules
        

Understand tsconfig.json, the heart of TypeScript projects, and how compiler options change your code safety.

TypeScript Configuration tsconfig

Interfaces describe the shape of objects and help teams agree on data contracts.
          
          ## Extending interfaces
          ```ts
          interface Person {
            name: string;
          }
          
          interface Employee extends Person {
            id: number;
            role: string;
          }
          
          const emp: Employee = { name: "Tom", id: 1, role: "Dev" };
          ```
          
          ## Optional and readonly
          ```ts
          interface Config {
            readonly host: string;
            port?: number;
          }
          ```
          
          ## Interface merging
          Same name interfaces merge automatically.
          
          ```ts
          interface User {
            name: string;
          }
          
          interface User {
            age: number;
          }
          
          const u: User = { name: "Sarah", age: 25 };
          ```
          
          ## Why useful?
          - API contracts
          - shared models
          - plugin systems
          
          ## Graph
          ```mermaid
          flowchart TD
            A[Base Interface] --> B[Extended Interface]
            B --> C[Concrete Object]
          ```
          
          ## Remember
          - Interfaces define contracts
          - They can extend and merge
          - Great for object shapes
          

Deep dive into interfaces: extension, merging, optional and readonly fields, and real API modeling.

TypeScript Advanced Interfaces

Type aliases let you name any type, not just objects.
          
          ## Union types
          ```ts
          type Status = "loading" | "success" | "error";
          
          let state: Status = "loading";
          ```
          
          ## Intersection types
          ```ts
          type A = { id: number };
          type B = { name: string };
          
          type AB = A & B;
          const obj: AB = { id: 1, name: "Tom" };
          ```
          
          ## Alias for functions
          ```ts
          type Logger = (msg: string) => void;
          
          const log: Logger = (m) => console.log(m);
          ```
          
          ## Domain modeling example
          ```ts
          type UserId = number;
          type Email = string;
          
          type User = {
            id: UserId;
            email: Email;
          };
          ```
          
          ## Graph
          ```mermaid
          flowchart LR
            A[Union] --> B[One of many]
            C[Intersection] --> D[Combine types]
          ```
          
          ## Remember
          - Aliases can represent anything
          - Use unions for choices
          - Use intersections to combine
          

Master type aliases: unions, intersections, and building expressive domain types.

TypeScript Type Aliases Power

When you have union types, you must narrow them.
          
          ## Example union
          ```ts
          type Result = string | number;
          ```
          
          ## Using typeof
          ```ts
          function print(res: Result) {
            if (typeof res === "string") {
              console.log(res.toUpperCase());
            } else {
              console.log(res.toFixed(2));
            }
          }
          ```
          
          ## Using in operator
          ```ts
          type A = { a: number };
          type B = { b: number };
          
          function handle(x: A | B) {
            if ("a" in x) {
              console.log(x.a);
            } else {
              console.log(x.b);
            }
          }
          ```
          
          ## Custom type guard
          ```ts
          function isString(x: any): x is string {
            return typeof x === "string";
          }
          ```
          
          ## Graph
          ```mermaid
          flowchart TD
            A[Union Type] --> B{Check}
            B -->|Yes| C[Narrowed Type]
            B -->|No| D[Other Type]
          ```
          
          ## Remember
          - Guards tell TS which type is active
          - Prevent runtime errors
          

Control unions at runtime using type guards so TypeScript understands which type you are working with.

Discriminated unions use a common field to decide type.
          
          ## Example: API state
          ```ts
          type Loading = { status: "loading" };
          type Success = { status: "success"; data: string };
          type ErrorState = { status: "error"; message: string };
          
          type State = Loading | Success | ErrorState;
          ```
          
          ## Handle safely
          ```ts
          function render(s: State) {
            switch (s.status) {
              case "loading":
                return "Loading...";
              case "success":
                return s.data;
              case "error":
                return s.message;
            }
          }
          ```
          
          TypeScript knows which fields exist.
          
          ## Graph
          ```mermaid
          flowchart TD
            A[State] --> B[loading]
            A --> C[success]
            A --> D[error]
          ```
          
          ## Remember
          - Use a shared tag field
          - Makes logic safe and readable
          

Design clean union models using a common discriminator field for safe branching logic.

Discriminated Unions

Type assertions tell TS: trust me, I know the type.
          
          ## Basic assertion
          ```ts
          const el = document.getElementById("app") as HTMLDivElement;
          el.innerHTML = "Hello";
          ```
          
          ## Angle bracket (not in JSX)
          ```ts
          const val = <string>someValue;
          ```
          
          ## Dangerous example
          ```ts
          const n = "hello" as unknown as number;
          ```
          
          This can break logic.
          
          ## Safer pattern: runtime check
          ```ts
          const el = document.getElementById("app");
          if (el instanceof HTMLDivElement) {
            el.innerHTML = "Safe";
          }
          ```
          
          ## Graph
          ```mermaid
          flowchart TD
            A[Unknown Value] --> B[Assertion]
            B --> C[Trusted Type]
          ```
          
          ## Remember
          - Assertions bypass checks
          - Prefer type guards first
          - Use only when you are sure
          

Learn when and how to use type assertions carefully without breaking type safety.

TypeScript Assertion Patterns

Immutability helps avoid hidden bugs.
          
          ## Readonly properties
          ```ts
          type User = {
            readonly id: number;
            name: string;
          };
          
          const u: User = { id: 1, name: "Tom" };
          // u.id = 2 ❌
          ```
          
          ## Readonly arrays
          ```ts
          const nums: ReadonlyArray<number> = [1, 2, 3];
          // nums.push(4) ❌
          ```
          
          ## Immutable update pattern
          ```ts
          const user = { id: 1, name: "Tom" };
          
          const updated = { ...user, name: "Sarah" };
          ```
          
          ## Graph
          ```mermaid
          flowchart LR
            A[Old Object] --> B[Copy + Change]
            B --> C[New Object]
          ```
          
          ## Remember
          - readonly prevents mutation
          - Create new objects for updates
          

Build safer systems using readonly properties and immutable patterns to prevent accidental changes.

Readonly and Immutability

Async code is everywhere in real apps.
          
          ## Typed Promise
          ```ts
          function fetchCount(): Promise<number> {
            return Promise.resolve(10);
          }
          ```
          
          ## Async function
          ```ts
          async function getUser(): Promise<{ id: number; name: string }> {
            return { id: 1, name: "Tom" };
          }
          ```
          
          ## Using await
          ```ts
          async function main() {
            const user = await getUser();
            console.log(user.name);
          }
          ```
          
          ## Error handling
          ```ts
          async function load() {
            try {
              const n = await fetchCount();
              console.log(n);
            } catch (e) {
              console.error(e);
            }
          }
          ```
          
          ## Graph
          ```mermaid
          flowchart TD
            A[Async fn] --> B[Promise]
            B --> C[await]
            C --> D[Value]
          ```
          
          ## Remember
          - Always type Promise<T>
          - Async returns Promise automatically
          

Use TypeScript to strongly type async functions, Promises, and API calls for safer async code.

TypeScript with Async and Promises

APIs return data. Type it to avoid bugs.
          
          ## Define response type
          ```ts
          type User = {
            id: number;
            name: string;
          };
          
          type ApiResponse<T> = {
            data: T;
            status: number;
          };
          ```
          
          ## Fetch example
          ```ts
          async function fetchUser(): Promise<ApiResponse<User>> {
            return {
              data: { id: 1, name: "Tom" },
              status: 200
            };
          }
          ```
          
          ## Use it
          ```ts
          async function main() {
            const res = await fetchUser();
            console.log(res.data.name);
          }
          ```
          
          ## Graph
          ```mermaid
          flowchart LR
            A[API] --> B[Response JSON]
            B --> C[Typed Object]
          ```
          
          ## Remember
          - Always type API contracts
          - Generics help reuse responses
          

Model API responses and requests using TypeScript so your frontend and backend stay in sync.

TypeScript with APIs

Event systems are common in apps.
          
          ## Define event map
          ```ts
          type Events = {
            login: { userId: number };
            logout: {};
            message: { text: string };
          };
          ```
          
          ## Event emitter
          ```ts
          class Emitter {
            emit<K extends keyof Events>(e: K, payload: Events[K]) {
              console.log(e, payload);
            }
          }
          
          const em = new Emitter();
          em.emit("login", { userId: 1 });
          // em.emit("login", { name: "x" }); ❌
          ```
          
          ## Graph
          ```mermaid
          flowchart TD
            A[Event Name] --> B[Payload Type]
            B --> C[Emitter]
          ```
          
          ## Remember
          - Map event names to payloads
          - Use keyof + generics
          

Create strongly typed event systems so only valid events and payloads can be emitted and handled.

Building Type-Safe Events

Errors should also be typed.
          
          ## Result pattern
          ```ts
          type Ok<T> = { ok: true; value: T };
          type Err = { ok: false; error: string };
          type Result<T> = Ok<T> | Err;
          ```
          
          ## Function returning Result
          ```ts
          function parseNum(s: string): Result<number> {
            const n = Number(s);
            return isNaN(n) ? { ok: false, error: "Not a number" } : { ok: true, value: n };
          }
          ```
          
          ## Use it
          ```ts
          const r = parseNum("10");
          if (r.ok) {
            console.log(r.value);
          } else {
            console.error(r.error);
          }
          ```
          
          ## Graph
          ```mermaid
          flowchart TD
            A[Function] --> B{ok?}
            B -->|Yes| C[Value]
            B -->|No| D[Error]
          ```
          
          ## Remember
          - Types can model success and failure
          - Reduces runtime surprises
          

Model errors using types instead of throwing blindly, building safer and more predictable flows.

TypeScript Error Handling Patterns

Generics are one of the most powerful features in TypeScript. They allow you to write flexible, reusable code while maintaining type safety.

## What are Generics?

Generics provide a way to create reusable components that work with multiple types rather than a single type. They allow you to define type variables that can be used throughout your code.

## Generic Functions

Generic functions allow you to define functions that work with any type while preserving type information.

## Generic Constraints

You can constrain generics to certain types using the extends keyword, ensuring that the generic type has certain properties or methods.

Learn how to use TypeScript generics to write reusable, type-safe code.

TypeScript Generics: A Practical Guide

This comprehensive guide covers 50 essential TypeScript interview questions that every TypeScript developer should know. These questions cover fundamental concepts, types, interfaces, generics, advanced types, and TypeScript best practices commonly asked in technical interviews.

## Core TypeScript Concepts

Understanding TypeScript's core concepts is essential. These questions test your knowledge of types, type inference, type annotations, and how TypeScript extends JavaScript.

## Types & Interfaces

TypeScript's type system is powerful. Master these questions to demonstrate your understanding of basic types, interfaces, type aliases, and when to use each.

## Advanced Types

Advanced TypeScript features include generics, utility types, conditional types, and mapped types. These questions test your ability to work with complex type scenarios.

## Classes & OOP

TypeScript enhances JavaScript classes with access modifiers, abstract classes, and interfaces. These questions cover object-oriented programming in TypeScript.

## Best Practices & Modern TypeScript

Production-ready TypeScript requires understanding best practices, module systems, decorators, and modern TypeScript features. These questions cover real-world TypeScript development.

Comprehensive collection of 50 essential TypeScript interview questions covering types, interfaces, generics, advanced types, and TypeScript best practices. Free TypeScript interview questions with answers. TypeScript interview prep guide.

TypeScript Interview Questions: 50 Essential Questions for Developers

Generics are what make TypeScript truly powerful. They let you write code that works with any type while still maintaining type safety. Once you understand generics, you'll write much better TypeScript code.

## What are Generics?

Generics are like variables for types. Instead of writing a function for strings, then for numbers, then for objects, you write it once with a generic type. TypeScript figures out the specific type when you use it.

## Basic Generic Syntax

The syntax is simple - use angle brackets with a type variable. You can name it anything, but T (for Type) is common. The function works with whatever type you pass in, and TypeScript checks it.

## Constraining Generics

Sometimes you want generics to have certain properties. You can constrain them using extends. This gives you flexibility while still ensuring type safety.

## Real-World Examples

I'll show you practical examples - generic functions, generic interfaces, generic classes. These patterns you'll use in every TypeScript project. Understanding generics is essential for professional TypeScript development.

Master TypeScript generics - one of the most powerful features. Learn how to write reusable, type-safe code that works with any type. Essential for building robust TypeScript applications.

TypeScript Generics: Write Reusable Type-Safe Code

One of the most common questions in TypeScript: should I use interface or type? The answer isn't always obvious, but understanding the differences helps you make the right choice.

## Interfaces Explained

Interfaces define the shape of an object. They're great for describing contracts - what properties an object should have. They can be extended and merged, which makes them flexible for building up complex types.

## Types Explained

Types are more flexible - they can represent objects, unions, intersections, primitives, and more. They're more powerful but sometimes less intuitive. Types can't be merged like interfaces.

## When to Use Interfaces

Use interfaces for object shapes, especially when you might extend or merge them. They're also better for declaration merging. If you're defining the structure of an object, interfaces are usually the way to go.

## When to Use Types

Use types for unions, intersections, mapped types, or when you need features interfaces don't support. Types are more powerful for complex type manipulations.

## Best Practices

I'll show you real examples of when to use each, and common patterns. Understanding this helps you write cleaner, more maintainable TypeScript code.

Understand the difference between interfaces and types in TypeScript. Learn when to use interfaces, when to use types, and why it matters. This knowledge helps you write better TypeScript code.

TypeScript Interfaces vs Types: When to Use Each

TypeScript comes with powerful utility types that transform existing types. Instead of writing complex type definitions from scratch, you can use these built-in helpers. They save time and make your code cleaner.

## What are Utility Types?

Utility types are built-in TypeScript types that transform other types. They take a type and return a new type with modifications. Think of them as functions for types.

## Most Useful Ones

Partial makes all properties optional, Required makes them all required, Pick selects specific properties, Omit removes properties, and Record creates object types. These cover most of what you need.

## Real-World Usage

I'll show you practical examples - making API request types optional, selecting specific properties, creating mapped types. These patterns you'll use constantly in TypeScript projects.

## Combining Utility Types

The real power comes from combining utility types. You can chain them together to create exactly the type you need. This is how professionals work with types.

Master TypeScript utility types - Partial, Required, Pick, Omit, and more. These built-in type helpers make working with types much easier. Essential knowledge for TypeScript developers.

TypeScript Utility Types: Built-in Type Helpers

Learn TypeScript for type-safe JavaScript development.

TypeScript Resources - Programming Guide

Browse TypeScript Content

Tutorials

Interview Questions

Practice Problems

Articles & Blog