← ClaudeAtlas

ts-typeslisted

TypeScript type system advisor. Always use this skill when designing TypeScript types, working with generics, narrowing union types, building discriminated unions, using utility types, or avoiding any. Use when the user says "how do I type this", "why is TypeScript complaining", "object is possibly null", "how do I narrow this", "how do I make this generic", "what's the right type for X", "how do I model this as a union type", or "how do I constrain a generic". Read this skill before answering any TypeScript type question.
AllThingsSmitty/agent-skills · ★ 1 · AI & Automation · score 74
Install: claude install-skill AllThingsSmitty/agent-skills
# TypeScript Types Good types are constraints, not descriptions. The goal is to make invalid states unrepresentable — so the compiler catches mistakes before they reach runtime. ## Prefer `unknown` over `any` `any` disables type checking. `unknown` preserves it. ```ts // Bad: silences all errors downstream function parse(raw: any) { return raw.data.value; // no error, even if raw is null } // Good: forces the caller to narrow before using function parse(raw: unknown) { if (typeof raw === 'object' && raw !== null && 'data' in raw) { // now safe to use } } ``` Use `any` only at integration boundaries with untyped third-party code, and isolate it — don't let it propagate. ## Avoid type assertions (`as`) `as T` tells the compiler to trust you. It doesn't check. Use it only when you genuinely know something the compiler can't infer, and add a comment explaining why. ```ts // Bad: silences a real error const el = document.getElementById('app') as HTMLDivElement; // Better: narrow properly const el = document.getElementById('app'); if (!(el instanceof HTMLDivElement)) throw new Error('Missing #app'); ``` ## Discriminated unions for modeling state When a value can be in multiple mutually exclusive states, use a discriminated union — a shared literal field that TypeScript uses to narrow. ```ts type Result<T> = | { status: 'ok'; data: T } | { status: 'error'; message: string } | { status: 'loading' }; function render(result: Result<User>) { if (result.st