MITFrontend

TypeScript Advanced Types

Name: TypeScript Advanced Types
Author: wshobson

By wshobson· wshobson/agents· 0

Patterns for generics, conditional types, mapped types, and type-safe TypeScript utilities.

Installation

1
Make sure Claude is on your device and in your terminal.
Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.
One-time setup
```
npm i -g @anthropic-ai/claude-code
```
Already have it? Skip ahead.

Paste into Claude Code or into your terminal.

Install

git clone ht•••••••••••••••••••••••••••••••••••• ••••••••••••••••••••• •• ••••• •• ••••••••••••••••••••••••••••••••••••••••••••••••••• •• •• •• •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• ••••••••••••••••••••••••••••••••••••••••••••••••••••

This copies the whole skill folder into ~/.claude/skills/typescript-advanced-types-wshobson/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

Faster alternative (instruction-only skills)

Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

Quick install (SKILL.md only)

mkdir -p ~/.•••••••••••••••••••••••••••••••••••••••••••••••• •• •••• ••••• •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •• ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.
Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Teaches Claude TypeScript's advanced type system with copy-ready patterns for generics and constraints, conditional types with `infer`, mapped types and key remapping, template literal types, and the built-in utility types (Partial, Pick, Omit, Record, and friends). Reach for it when writing reusable type utilities, typing API clients or form validation, deriving types with inference, or migrating JavaScript to strict TypeScript. Includes type-testing helpers, best practices, common pitfalls, and compile-time performance notes.

What this skill does

What it does: Gives Claude a reference for TypeScript's advanced type system so it can build and debug type-safe abstractions instead of falling back to any.

Generics with constraints (T extends HasLength), multiple type parameters, and inference-driven usage
Conditional types including infer for return-type extraction, distributive unions, and nested type dispatch
Mapped types with key remapping (as), property filtering by type, and rebuilding modifiers like readonly/optional
Template literal types for event-handler names, string casing transforms, and recursive dotted config paths
Built-in utility types (Partial, Required, Pick, Omit, Exclude, Extract, NonNullable, Record) plus type-equality test helpers
Best practices, common pitfalls, and notes on keeping recursive/conditional types fast to compile