--- name: typescript-advanced-types description: "Master TypeScript's advanced type system including generics, conditional types, mapped types, and React TypeScript patterns. Use when: (1) implementing complex type logic, (2) creating reusable type utilities, (3) typing React components, hooks, and events, (4) ensuring compile-time type safety." layer: 1 tech_stack: [typescript, react] topics: [generics, conditional-types, mapped-types, utility-types, react-types] depends_on: [] complements: [modern-javascript-patterns] keywords: [Generic, Partial, Pick, Omit, Record, keyof, infer, extends, ReactNode] --- # TypeScript Advanced Types Master TypeScript's advanced type system for building robust, type-safe applications. ## Generics ```typescript // Basic generic function function identity(value: T): T { return value; } // Generic with constraint interface HasLength { length: number; } function logLength(item: T): T { console.log(item.length); return item; } // Multiple type parameters function merge(obj1: T, obj2: U): T & U { return { ...obj1, ...obj2 }; } ``` ## Conditional Types ```typescript // Basic conditional type IsString = T extends string ? true : false; // Extract return type type ReturnType = T extends (...args: any[]) => infer R ? R : never; // Nested conditions type TypeName = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : "object"; ``` ## Mapped Types ```typescript // Make all properties readonly type Readonly = { readonly [P in keyof T]: T[P] }; // Make all properties optional type Partial = { [P in keyof T]?: T[P] }; // Key remapping type Getters = { [K in keyof T as `get${Capitalize}`]: () => T[K] }; // Filter by type type PickByType = { [K in keyof T as T[K] extends U ? K : never]: T[K] }; ``` ## Template Literal Types ```typescript type EventName = "click" | "focus" | "blur"; type EventHandler = `on${Capitalize}`; // "onClick" | "onFocus" | "onBlur" // String manipulation type Upper = Uppercase<"hello">; // "HELLO" type Lower = Lowercase<"HELLO">; // "hello" type Cap = Capitalize<"john">; // "John" ``` ## Utility Types ```typescript // Built-in utilities type PartialUser = Partial; // All optional type RequiredUser = Required; // All required type ReadonlyUser = Readonly; // All readonly type NameEmail = Pick; // Select props type NoPassword = Omit; // Remove props type T1 = Exclude<"a" | "b" | "c", "a">; // "b" | "c" type T2 = Extract<"a" | "b" | "c", "a" | "b">; // "a" | "b" type T3 = NonNullable; // string type PageInfo = Record<"home" | "about", { title: string }>; ``` ## React TypeScript Patterns ### Generic Components ```typescript interface ListProps { items: T[]; renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; } function List({ items, renderItem, keyExtractor }: ListProps) { return (

{renderItem(item)}

); } ``` ### Typed Hooks ```typescript type ApiState = | { status: 'idle' } | { status: 'loading' } | { status: 'success'; data: T } | { status: 'error'; error: string }; function useApiState() { const [state, setState] = useState>({ status: 'idle' }); return { state, setLoading, setSuccess, setError }; } ``` ### Context with Type Safety ```typescript interface AuthContextValue { user: UserDto | null; login: (credentials: LoginDto) => Promise; logout: () => void; } const AuthContext = createContext(null); function useAuth(): AuthContextValue { const context = useContext(AuthContext); if (!context) throw new Error('useAuth must be used within AuthProvider'); return context; } ``` ### Event Handler Types ```typescript // Form submit const handleSubmit: React.FormEventHandler = (e) => { e.preventDefault(); }; // Input change const handleChange: React.ChangeEventHandler = (e) => { console.log(e.target.value); }; // Button click const handleClick: React.MouseEventHandler = (e) => { console.log(e.currentTarget.name); }; ``` ### Common Event Types | Event | Type | |-------|------| | Form submit | `React.FormEventHandler` | | Input change | `React.ChangeEventHandler` | | Button click | `React.MouseEventHandler` | | Key press | `React.KeyboardEventHandler` | | Focus | `React.FocusEventHandler` | ### Ref Types ```typescript const inputRef = useRef(null); // Forward ref const Input = forwardRef( ({ label, ...props }, ref) => ( ) ); ``` ### Children Props ```typescript interface CardProps { children: React.ReactNode; title: string; } // Render prop interface DataFetcherProps { url: string; children: (data: T, loading: boolean) => React.ReactNode; } ``` ## Type Guards ```typescript function isString(value: unknown): value is string { return typeof value === "string"; } function assertIsString(value: unknown): asserts value is string { if (typeof value !== "string") throw new Error("Not a string"); } ``` ## Best Practices 1. **Use `unknown` over `any`** - Enforce type checking 2. **Prefer `interface` for objects** - Better error messages 3. **Use `type` for unions** - More flexible 4. **Leverage inference** - Let TypeScript infer when possible 5. **Create helper types** - Build reusable utilities 6. **Use const assertions** - Preserve literal types 7. **Avoid type assertions** - Use guards instead 8. **Enable strict mode** - All strict options ## Detailed References For comprehensive patterns, see: - [references/advanced-patterns.md](references/advanced-patterns.md) - [references/type-challenges.md](references/type-challenges.md) ## Resources - **TypeScript Handbook**: https://www.typescriptlang.org/docs/handbook/ - **Type Challenges**: https://github.com/type-challenges/type-challenges

typescript-advanced-types

Scan your own AI components