Type System Fundamentals

After this lesson, you will be able to: Use TS's type system: primitives, object types, arrays, tuples, enums, literal types, unions, intersections.

Foundations. Get these right and the rest of TS makes sense.

Prerequisites:TypeScript Setup

Primitives + objects + arrays

Read each line.

tsx

// Primitives
let n: number = 42;
let s: string = "hello";
let b: boolean = true;
let u: undefined = undefined;
let nu: null = null;
let big: bigint = 100n;
let sym: symbol = Symbol();

// Objects
type User = { id: string; name: string; age?: number };  // age optional
const u1: User = { id: "u1", name: "Alex" };

// Arrays + tuples
const nums: number[] = [1, 2, 3];
const point: [number, number] = [1, 2];   // exactly 2 numbers
const rgb: readonly [number, number, number] = [255, 0, 0];   // immutable

Unions + intersections + literals

The composable building blocks.

tsx

// Union, one OR the other
type Status = "loading" | "success" | "error";
type Id = string | number;

// Intersection, both
type Auditable = { createdAt: Date; updatedAt: Date };
type Stored<T> = T & { id: string } & Auditable;
type User = Stored<{ name: string; email: string }>;

// Literal types
function setAlign(align: "left" | "center" | "right") { /* ... */ }
setAlign("center");
setAlign("middle");   // Error

// Discriminated union (the killer TS pattern)
type Result =
  | { ok: true; data: User }
  | { ok: false; error: string };

function handle(r: Result) {
  if (r.ok) {
    console.log(r.data.name);   // TS knows it's the success branch
  } else {
    console.log(r.error);       // TS knows it's the error branch
  }
}

Enums — use sparingly

`enum Status { Pending, Active, Closed }` compiles to runtime objects. `const enum` is inlined (better perf) but breaks isolatedModules. Modern preference: literal union types (`type Status = 'pending' | 'active' | 'closed'`). Cleaner; no runtime cost. Stick to enums when you need iteration via Object.values or interop with another language.

Common mistakes only experienced TS devs avoid

Using `any` to silence type errors. Almost always wrong. Object type `{}` (means 'any non-null value'). Use Record<string, unknown> or unknown. `as Type` casts everywhere. Casts disable type-checking; use sparingly. Forgetting discriminated unions for state machines. They make impossible states impossible.

Quick Check

Why use a discriminated union over `{ ok: boolean; data?: User; error?: string }`?

Pick the senior reason.

Shorter syntaxTS narrows the type based on the discriminator (`ok`), so accessing `r.data` is safe ONLY when `r.ok === true`Better runtime perfRequired by ESLint

←TypeScript Setup: tsconfig + strict mode

Back to TypeScript

Functions in TypeScript→