Strict Static Type System

TypeScript: JavaScript with Type Safety

TypeScript extends JavaScript by adding compile-time types, interfaces, and generics. Understand how the `tsc` compiler type-checks, strips types, and outputs standard JavaScript.

Visual Execution Architecture: TypeScript to Runtime

1. TypeScript Source

Contains static types, interfaces, generics, and annotations.

app.ts

2. tsc Compiler

Type-checks the AST against tsconfig rules and reports errors.

Type Check Pass

3. Type Erasure

All types, interfaces, and annotations are stripped completely.

Zero runtime overhead

4. JavaScript Engine

Browser V8 / Node.js executes standard vanilla JavaScript.

app.js

Static Type System & Inference

Catches type mismatches, null pointer bugs, and invalid object access at compile time rather than crashing in production.

// Type inference
let count = 42; // inferred as number
// count = "forty-two"; // Error: Type 'string' is not assignable to type 'number'

Generics (<T>)

Create flexible, reusable components that work over a variety of types while maintaining strict type safety.

function getFirstItem<T>(items: T[]): T | undefined {
  return items[0];
}
const num = getFirstItem([10, 20, 30]); // typed as number

Discriminated Unions & Narrowing

Pattern matching over variant objects using a shared literal tag field to guarantee exhaustive case handling.

type State = 
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; error: Error };

Utility Types

Built-in type transformers to manipulate existing interfaces without code duplication.

type User = { id: string; name: string; email: string };
type UpdateUserDto = Partial<User>; // all optional
type PublicUser = Omit<User, "email">; // omit email