Learn TypeScript Patterns

function double(value: string | number) {
  // No narrowing, just cast
  return (value as number) * 2;
}

double("hello"); // NaN at runtime

function double(value: string | number) {
  if (typeof value === "number") {
    return value * 2;
  }
  return value.repeat(2);
}

double("hello"); // "hellohello"

function first(arr: any[]): any {
  return arr[0];
}

const val = first([1, 2, 3]);
// val is 'any', no autocomplete
val.toFixed(2); // No error even if wrong

function first<T>(arr: T[]): T {
  return arr[0];
}

const val = first([1, 2, 3]);
// val is 'number', full autocomplete
val.toFixed(2); // OK, checked by compiler

interface User {
  name: string;
  email: string;
  age: number;
}

function updateUser(id: string, data: User) {
  // Caller must pass ALL fields, even
  // if they only want to update one
}

updateUser("1", {
  name: "Alice",
  email: "alice@example.com",
  age: 30,
}); // Just wanted to update name!

interface User {
  name: string;
  email: string;
  age: number;
}

function updateUser(id: string, data: Partial<User>) {
  // Caller passes only the fields to update
}

updateUser("1", { name: "Alice" }); // OK

// Overly broad type
function setStatus(status: string) {
  // Any string is accepted
}

setStatus("active");  // OK
setStatus("acitve");  // No error, typo undetected
setStatus("banana");  // No error, nonsense value

type Status = "active" | "inactive" | "pending";

function setStatus(status: Status) {
  // Only valid values accepted
}

setStatus("active");  // OK
setStatus("acitve");  // Error: typo caught
setStatus("banana");  // Error: not a valid Status

type Color = "red" | "green" | "blue";

const palette = {
  primary: "red",
  secondary: "green",
} as Record<string, Color>;

// Lost the specific keys!
palette.primary;    // Color (not "red")
palette.oops;       // Color (no error for bad key)

type Color = "red" | "green" | "blue";

const palette = {
  primary: "red",
  secondary: "green",
} satisfies Record<string, Color>;

// Keeps specific keys and values!
palette.primary;    // "red"
palette.oops;       // Error: property doesn't exist

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE",
}

// Must import enum to use values
// Generates runtime JavaScript object
// JSON requires conversion: Color[json.color]
function paint(color: Color) { }
paint(Color.Red);

type Color = "RED" | "GREEN" | "BLUE";

// No import needed for values
// Zero runtime cost (erased at compile time)
// JSON strings work directly
function paint(color: Color) { }
paint("RED");

// tsconfig: "strict": false
function getLength(name: string) {
  return name.length;
}

const user = users.find((u) => u.id === id);
// No error, but user might be undefined
console.log(getLength(user.name));
// Runtime: Cannot read property 'name'
// of undefined

// tsconfig: "strict": true
function getLength(name: string) {
  return name.length;
}

const user = users.find((u) => u.id === id);
// Error: 'user' is possibly 'undefined'
if (user) {
  console.log(getLength(user.name));
}

interface Config {
  apiUrl: string;
  timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
};

// Oops, accidentally mutated config
config.timeout = -1;
// No error, invalid state

interface Config {
  readonly apiUrl: string;
  readonly timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
};

// config.timeout = -1;
// Error: Cannot assign to 'timeout'
// because it is a read-only property

// Callback typed as Function
function fetchData(callback: Function) {
  const data = { name: "Alice" };
  callback(data);
}

// No type safety on the callback
fetchData((data) => {
  // data is 'any'
  console.log(data.nonexistent); // No error
});

interface User {
  name: string;
}

function fetchData(callback: (data: User) => void) {
  const data: User = { name: "Alice" };
  callback(data);
}

fetchData((data) => {
  console.log(data.name);        // OK
  console.log(data.nonexistent); // Error
});

type User = {
  name: string;
  role: string;
};

// Intersection: silently merges conflicts
type AdminUser = User & {
  role: number; // No error here!
};

// role is 'string & number' which is 'never'
// You only find out when you try to use it
const admin: AdminUser = {
  name: "Alice",
  role: "admin", // Error: never
};

interface User {
  name: string;
  role: string;
}

// Extends: catches conflicts immediately
// interface AdminUser extends User {
//   role: number; // Error: not assignable
// }

interface AdminUser extends User {
  permissions: string[];
}

const admin: AdminUser = {
  name: "Alice",
  role: "admin", // OK
  permissions: ["read"],
};

interface User {
  name: string;
  email: string;
  age: number;
}

// Manually creating an optional version
interface PartialUser {
  name?: string;
  email?: string;
  age?: number;
}
// Must update both when User changes

interface User {
  name: string;
  email: string;
  age: number;
}

// Mapped type transforms every property
type PartialUser = {
  [K in keyof User]?: User[K];
};

// Or simply use the built-in:
type AlsoPartialUser = Partial<User>;
// Both auto-update when User changes

type EventHandler = {
  on: (event: string, cb: () => void) => void;
};

const emitter: EventHandler = getEmitter();
emitter.on("clck", handleClick);
// Typo not caught, handler never fires
// No error at compile time

type EventName =
  | `on${"Click" | "Hover" | "Focus"}`
  | `on${"Key" | "Mouse"}${"Down" | "Up"}`;

type EventHandler = {
  on: (event: EventName, cb: () => void) => void;
};

const emitter: EventHandler = getEmitter();
emitter.on("onClick", handleClick);
// emitter.on("onClck", handleClick);
// Error: not assignable to EventName

function UserCard(props: any) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.emial}</p>
      {/* Typo: "emial" instead of "email" */}
      {/* No error because props is any */}
    </div>
  );
}

<UserCard name="Alice" />
// Missing email, no error

interface UserCardProps {
  name: string;
  email: string;
  role?: "admin" | "user";
}

function UserCard({ name, email, role = "user" }: UserCardProps) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
      <span>{role}</span>
    </div>
  );
}

// <UserCard name="Alice" />
// Error: missing required prop 'email'

// utils.js (no types)
export function slugify(text) {
  return text
    .toLowerCase()
    .replace(/\s+/g, "-");
}

// app.ts
import { slugify } from "./utils";
// Error: Could not find a declaration
// file for module './utils'
// slugify is implicitly 'any'

// utils.d.ts
export declare function slugify(
  text: string
): string;

// Or even better, rename to utils.ts:
export function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/\s+/g, "-");
}

// app.ts
import { slugify } from "./utils";
// slugify is typed: (text: string) => string

try {
  await fetchData();
} catch (error) {
  // With useUnknownInCatchVariables: false
  // error is 'any'
  console.log(error.message);
  // Works for Error objects but crashes
  // if a string or number was thrown
  showToast(error.message);
}

try {
  await fetchData();
} catch (error) {
  // error is 'unknown'
  if (error instanceof Error) {
    console.log(error.message);
    showToast(error.message);
  } else {
    console.log("Unknown error:", error);
    showToast("An unexpected error occurred");
  }
}

function processData(data: any) {
  // No errors, but no safety either
  data.forEach((item: any) => {
    console.log(item.naem); // Typo
    updateRecord(item.id.toFixed()); // id might not be number
  });
}

// any spreads: anything derived from
// an any value is also any

interface DataRecord {
  id: number;
  name: string;
  status: "active" | "inactive";
}

function processData(data: DataRecord[]) {
  data.forEach((item) => {
    console.log(item.name); // Autocomplete
    // item.naem; // Error: typo caught
    updateRecord(item.id.toFixed());
  });
}