
TypeScript Best Practices
Safeby @0xBigBossVerified Source
About
Apply TypeScript best practices for type safety, generics, utility types, and advanced patterns.
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." license: MIT allowed-tools: "Read Write Bash" metadata: author: claude-mods 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
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
type Result<T> =
| { status: "success"; data: T }
| { status: "error"; error: string }
| { status: "loading" };
function handle<T>(result: Result<T>) {
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<T> | All props optional | Partial<User> for update payloads |
| Required<T> | All props required | Required<Config> for validated config |
| Readonly<T> | All props readonly | Readonly<State> for immutable state |
| Pick<T, K> | Select specific props | Pick<User, "id" \| "name"> |
| Omit<T, K> | Remove specific props | Omit<User, "password"> |
| Record<K, V> | Object with typed keys/values | Record<string, number> |
| Exclude<U, E> | Remove types from union | Exclude<Status, "deleted"> |
| Extract<U, E> | Keep types from union | Extract<Event, { type: "click" }> |
| NonNullable<T> | Remove null/undefined | NonNullable<string \| null> |
| ReturnType<F> | Function return type | ReturnType<typeof fetchUser> |
| Parameters<F> | Function params as tuple | Parameters<typeof createUser> |
| Awaited<T> | Unwrap Promise type | Awaited<Promise<User>> = User |
Generic Patterns
Constrained Generics
// Basic constraint
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
// Multiple constraints
function merge<T extends object, U extends object>(a: T, b: U): T & U {
return { ...a, ...b };
}
// Default generic type
type ApiResponse<T = unknown> = {
data: T;
status: number;
};
Conditional Types
// Basic conditional
type IsString<T> = T extends string ? true : false;
// infer keyword - extract inner type
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type UnwrapArray<T> = T extends (infer U)[] ? U : T;
// Distributive conditional (distributes over union)
type ToArray<T> = T extends any ? T[] : never;
// ToArray<string | number> = string[] | number[]
// Prevent distribution with wrapping
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;
// ToArrayNonDist<string | number> = (string | number)[]
Mapped Types
// Make all properties optional and nullable
type Nullable<T> = { [K in keyof T]: T[K] | null };
// Add prefix to keys
type Prefixed<T, P extends string> = {
[K in keyof T as `${P}${Capitalize<string & K>}`]: T[K];
};
// Prefixed<{ name: string }, "get"> = { getName: string }
// Filter keys by value type
type StringKeys<T> = {
[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
{
"compilerOptions": {
// Strict mode (always enable)
"strict": true, // Enables all strict checks
"noUncheckedIndexedAccess": true, // arr[0] is T | undefined
// Module system
"module"

