TypeScript Type Inference

TypeScript Type Inference: Contextual Typing & Widening Rules

TypeScript uses sophisticated algorithms for type inference, inferring type annotations when explicit annotations are omitted based on assignment values, control flow context, and return statements.

Contextual Typing & Widening

1. Contextual Typing: TypeScript infers a parameter's type based on its location (e.g. callback functions passed into window.addEventListener or .map()).
2. Type Widening: When declaring a mutable variable (let x = "hello"), TypeScript widens the type from literal "hello" to string.
3. Const Narrowing (as const): Placing as const prevents type widening, preserving exact literal types and deep readonly properties.

Practical Code Example

// Contextual Typing in Callbacks
const numbers = [10, 20, 30];

// Compiler automatically infers 'num' as number inside .map()
const doubled = numbers.map((num) => num * 2);

// Type Widening
let mutableStatus = "PENDING"; // Type widened to string

// Const Narrowing (as const)
const immutableConfig = {
  endpoint: "https://api.kodersolution.com",
  timeout: 5000,
  roles: ["ADMIN", "USER"]
} as const;

// immutableConfig.endpoint = "other"; // Error: Cannot assign to read-only property
// immutableConfig.roles.push("GUEST"); // Error: Property 'push' does not exist on readonly array

Best Practices & Gotchas

• Use as const for Config Objects & Enum-like Constants: Preserves exact string literal unions and prevents accidental mutations.
• Trust Contextual Typing in Array Iterators: Avoid unnecessary explicit callback parameter annotations like numbers.map((num: number) => ...).
• Beware of Unintended Widening: When returning object literals from functions, annotate return types to prevent accidental type widening.

Self-Check Challenge

Declare an object const config = { mode: "dark" } as const. What type does TypeScript infer for config.mode? (Answer: "dark", not string)