TypeScript in Depth (Advanced)

After this lesson, you will be able to: Apply advanced TypeScript: generics, utility types, mapped types, conditional types, declaration files.

This goes beyond the Web Dev TS intro. The advanced TypeScript content most JS devs never learn.

Prerequisites:Node.js Basics

Generics — the type-level functions

Functions that work for many types while preserving type info.

tsx

// Without generics, loses type
function firstAny(arr: any[]): any { return arr[0]; }
const x = firstAny([1, 2, 3]);   // x: any  ← bad

// With generics, preserves type
function first<T>(arr: T[]): T | undefined { return arr[0]; }
const y = first([1, 2, 3]);      // y: number | undefined

// Generic constraint
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

// Default type parameter
type Result<T, E = Error> = { ok: true; data: T } | { ok: false; error: E };

Utility types — TS's built-in toolkit

The 10 you'll use weekly.

tsx

type User = { id: string; name: string; email: string; admin: boolean };

type PartialUser = Partial<User>;             // all fields optional
type RequiredUser = Required<User>;            // all fields required
type ReadonlyUser = Readonly<User>;
type UserName = Pick<User, "id" | "name">;     // subset
type UserPublic = Omit<User, "admin">;         // exclude
type RoleMap = Record<"admin" | "member", User>;

type UserKeys = keyof User;                    // "id" | "name" | "email" | "admin"
type IdType = User["id"];                      // string

// Function-related
function fetchUser(id: string, opts?: { cache: boolean }): Promise<User> { /* ... */ }
type FetchArgs = Parameters<typeof fetchUser>;          // [id: string, opts?: { cache: boolean }]
type FetchReturn = ReturnType<typeof fetchUser>;        // Promise<User>
type FetchAwaited = Awaited<FetchReturn>;               // User

Mapped + conditional + template literal types

Advanced, most pros use these monthly.

tsx

// Mapped type, transform keys
type Nullable<T> = { [K in keyof T]: T[K] | null };
type NullableUser = Nullable<User>;

// Conditional type, type-level if/else
type IsArray<T> = T extends any[] ? true : false;
type A = IsArray<number[]>;   // true
type B = IsArray<number>;     // false

// infer, extract types from generics
type ElementOf<T> = T extends (infer U)[] ? U : never;
type N = ElementOf<number[]>;   // number

// Template literal types
type Event = `on${"Click" | "Hover"}`;   // "onClick" | "onHover"
type HexColor = `#${string}`;

Declaration files (.d.ts)

A .d.ts file describes types for code that has none (a JS library, a binary, an external API). DefinitelyTyped (`@types/foo`) hosts community-maintained types for popular libs. Writing your own: `declare module "untyped-lib" { export function fn(x: number): string; }`. Use sparingly; native TS libraries are increasingly the norm.

Common mistakes only experienced TS devs avoid

Using `any` to escape type problems. Almost always a code smell. Use `unknown` if you genuinely don't know. Reaching for advanced types when simple ones work. Don't over-engineer types. Skipping strict mode in tsconfig. Half the benefit comes from strict null checks. Casting with `as` instead of fixing the underlying type. Casts are escape hatches; use sparingly.

Quick Check

What does `Pick<User, "id" | "name">` produce?

Pick the answer.

A new type with all User fieldsA new type with only the `id` and `name` fields of UserA booleanAn error

←Modules: ESM vs CommonJS

Back to JavaScript (Standalone Deep Dive)

JavaScript Tooling→