--- name: typescript-ops description: "TypeScript type system, generics, utility types, strict mode, and ecosystem patterns. Use for: typescript, ts, type, generic, utility type, Partial, Pick, Omit, Record, Exclude, Extract, ReturnType, Parameters, keyof, typeof, infer, mapped type, conditional type, template literal type, discriminated union, type guard, type assertion, type narrowing, tsconfig, strict mode, declaration file, zod, valibot." allowed-tools: "Read Write Bash" related-skills: [react-ops, testing-ops] --- # TypeScript Operations Comprehensive TypeScript skill covering the type system, generics, and production patterns. ## Type Narrowing Decision Tree ``` How to narrow a type? │ ├─ Primitive type check │ └─ typeof: typeof x === "string" │ ├─ Instance check │ └─ instanceof: x instanceof Date │ ├─ Property existence │ └─ in: "email" in user │ ├─ Discriminated union │ └─ switch on literal field: switch (event.type) │ ├─ Null/undefined check │ └─ Truthiness: if (x) or if (x != null) │ ├─ Custom logic │ └─ Type predicate: function isUser(x: unknown): x is User │ └─ Assertion (you know better than TS) └─ as: value as string (escape hatch, avoid when possible) ``` ### Type Guard Example ```typescript interface Dog { bark(): void; breed: string } interface Cat { meow(): void; color: string } function isDog(pet: Dog | Cat): pet is Dog { return "bark" in pet; } function handlePet(pet: Dog | Cat) { if (isDog(pet)) { pet.bark(); // TS knows it's Dog here } else { pet.meow(); // TS knows it's Cat here } } ``` ### Discriminated Unions ```typescript type Result = | { status: "success"; data: T } | { status: "error"; error: string } | { status: "loading" }; function handle(result: Result) { switch (result.status) { case "success": return result.data; // data is available case "error": throw new Error(result.error); // error is available case "loading": return null; } // Exhaustiveness check: result is `never` here const _exhaustive: never = result; } ``` ## Utility Types Cheat Sheet | Utility | What It Does | Example | |---------|-------------|---------| | `Partial` | All props optional | `Partial` for update payloads | | `Required` | All props required | `Required` for validated config | | `Readonly` | All props readonly | `Readonly` for immutable state | | `Pick` | Select specific props | `Pick` | | `Omit` | Remove specific props | `Omit` | | `Record` | Object with typed keys/values | `Record` | | `Exclude` | Remove types from union | `Exclude` | | `Extract` | Keep types from union | `Extract` | | `NonNullable` | Remove null/undefined | `NonNullable` | | `ReturnType` | Function return type | `ReturnType` | | `Parameters` | Function params as tuple | `Parameters` | | `Awaited` | Unwrap Promise type | `Awaited>` = `User` | ## Generic Patterns ### Constrained Generics ```typescript // Basic constraint function getProperty(obj: T, key: K): T[K] { return obj[key]; } // Multiple constraints function merge(a: T, b: U): T & U { return { ...a, ...b }; } // Default generic type type ApiResponse = { data: T; status: number; }; ``` ### Conditional Types ```typescript // Basic conditional type IsString = T extends string ? true : false; // infer keyword - extract inner type type UnwrapPromise = T extends Promise ? U : T; type UnwrapArray = T extends (infer U)[] ? U : T; // Distributive conditional (distributes over union) type ToArray = T extends any ? T[] : never; // ToArray = string[] | number[] // Prevent distribution with wrapping type ToArrayNonDist = [T] extends [any] ? T[] : never; // ToArrayNonDist = (string | number)[] ``` ### Mapped Types ```typescript // Make all properties optional and nullable type Nullable = { [K in keyof T]: T[K] | null }; // Add prefix to keys type Prefixed = { [K in keyof T as `${P}${Capitalize}`]: T[K]; }; // Prefixed<{ name: string }, "get"> = { getName: string } // Filter keys by value type type StringKeys = { [K in keyof T as T[K] extends string ? K : never]: T[K]; }; ``` **Deep dive**: Load `./references/generics-patterns.md` for advanced type-level programming, recursive types, template literal types. ## tsconfig Quick Reference ```jsonc { "compilerOptions": { // Strict mode (always enable) "strict": true, // Enables all strict checks "noUncheckedIndexedAccess": true, // arr[0] is T | undefined // Module system "module": "esnext", // or "nodenext" for Node "moduleResolution": "bundler", // or "nodenext" "esModuleInterop": true, // Output "target": "es2022", "outDir": "dist", "declaration": true, // Generate .d.ts "sourceMap": true, // Paths "baseUrl": ".", "paths": { "@/*": ["src/*"] }, // Strictness extras "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "forceConsistentCasingInFileNames": true }, "include": ["src"], "exclude": ["node_modules", "dist"] } ``` **Deep dive**: Load `./references/config-strict.md` for strict mode migration, monorepo config, project references. ## Common Gotchas | Gotcha | Why | Fix | |--------|-----|-----| | `any` leaks | `any` disables type checking for everything it touches | Use `unknown` + narrowing instead | | `as` assertions hide bugs | Assertion doesn't check at runtime | Use type guards or validation (Zod) | | `enum` quirks | Numeric enums are not type-safe, reverse mappings confuse | Use `as const` objects or string literal unions | | `object` vs `Record` vs `{}` | `{}` matches any non-null value, `object` is non-primitive | Use `Record` for "any object" | | Array index access | `arr[999]` returns `T` not `T \| undefined` by default | Enable `noUncheckedIndexedAccess` | | Optional vs undefined | `{ x?: string }` allows missing key, `{ x: string \| undefined }` requires key | Be explicit about which you mean | | `!` non-null assertion | Silences null checks, no runtime effect | Use `?? defaultValue` or proper null check | | Structural typing surprise | `{ a: 1, b: 2 }` assignable to `{ a: number }` | Use branded types for nominal typing | ## Branded / Nominal Types ```typescript // Prevent accidentally mixing types that are structurally identical type UserId = string & { readonly __brand: "UserId" }; type OrderId = string & { readonly __brand: "OrderId" }; function createUserId(id: string): UserId { return id as UserId; } function getUser(id: UserId) { /* ... */ } const userId = createUserId("u-123"); const orderId = "o-456" as OrderId; getUser(userId); // OK getUser(orderId); // Error: OrderId not assignable to UserId ``` ## Runtime Validation (Zod) ```typescript import { z } from "zod"; // Define schema const UserSchema = z.object({ id: z.number(), name: z.string().min(1), email: z.string().email(), role: z.enum(["admin", "user"]), settings: z.object({ theme: z.enum(["light", "dark"]).default("light"), }).optional(), }); // Infer type from schema type User = z.infer; // Validate const user = UserSchema.parse(untrustedData); // throws on invalid const result = UserSchema.safeParse(untrustedData); // returns { success, data/error } ``` ## Reference Files Load these for deep-dive topics. Each is self-contained. | Reference | When to Load | |-----------|-------------| | `./references/type-system.md` | Advanced types, branded types, type-level programming, satisfies operator | | `./references/generics-patterns.md` | Generic constraints, conditional types, mapped types, template literals, recursive types | | `./references/utility-types.md` | All built-in utility types with examples, custom utility types | | `./references/config-strict.md` | tsconfig deep dive, strict mode migration, project references, monorepo setup | | `./references/ecosystem.md` | Zod/Valibot, type-safe API clients, ORM types, testing with Vitest | ## See Also - `testing-ops` - Cross-language testing strategies - `ci-cd-ops` - TypeScript CI pipelines, type checking in CI