Professional TypeScript Showcase

Union types allow a variable to hold values of different types. They're defined with the pipe |.

// Defining a union type
type ID = string | number;

function printID(id: ID) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

Use unions in API responses or helpers where inputs may be one of several types.

Type guards refine types during runtime, making code safer and clearer.

// custom type guard
interface Bird { fly(): void; }
interface Fish { swim(): void; }

function isBird(pet: Bird | Fish): pet is Bird {
  return (pet as Bird).fly !== undefined;
}

Use type predicates value is Type to let TypeScript know what branch is active.

Use ?. and ?? to write concise, safe access and defaults.

interface User {
  name: string;
  address?: { city?: string };
}

const city = (user: User) => user.address?.city ?? "Unknown";

Cleaner than long logical checks and helps readability.

Generics let you write reusable functions and components while preserving type info.

function identity(value: T): T {
  return value;
}

const v = identity(42);

Great for collections, utility functions and generic components.

When you know more than the compiler, use assertions carefully to avoid runtime errors.

const input = document.querySelector('#name') as HTMLInputElement;
console.log(input.value);

Prefer narrowing and guards over assertions when possible.

Create robust predicates when you need precise runtime checks.

function isStringArray(value: any): value is string[] {
  return Array.isArray(value) && value.every(v => typeof v === 'string');
}

Useful for runtime validation before processing data.