--- name: typescript-utility-types user-invocable: false description: Use when typeScript utility types, mapped types, and advanced type manipulation. Use when creating flexible, type-safe TypeScript code. allowed-tools: - Bash - Read - Write - Edit --- # TypeScript Utility Types Master TypeScript's powerful type system including built-in utility types, mapped types, conditional types, and advanced type manipulation techniques for creating flexible, type-safe code. ## Built-in Utility Types ### Partial and Required ```typescript interface User { id: string; name: string; email: string; age: number; } // Partial makes all properties optional type PartialUser = Partial; // { id?: string; name?: string; email?: string; age?: number; } function updateUser(id: string, updates: Partial): User { const existingUser = getUser(id); return { ...existingUser, ...updates }; } updateUser('123', { name: 'John' }); // Valid updateUser('123', { age: 30 }); // Valid // Required makes all properties required interface OptionalConfig { host?: string; port?: number; timeout?: number; } type RequiredConfig = Required; // { host: string; port: number; timeout: number; } function validateConfig(config: Required): boolean { return config.host.length > 0 && config.port > 0; } ``` ### Pick and Omit ```typescript interface Article { id: string; title: string; content: string; author: string; createdAt: Date; updatedAt: Date; views: number; } // Pick selects specific properties type ArticlePreview = Pick; // { id: string; title: string; author: string; } function displayPreview(article: ArticlePreview): void { console.log(`${article.title} by ${article.author}`); } // Omit removes specific properties type ArticleWithoutDates = Omit; // { id: string; title: string; content: string; author: string; views: number; } // Combining Pick and Omit type ArticleMetadata = Pick; type ArticleData = Omit; ``` ### Readonly and Record ```typescript // Readonly makes all properties readonly type ReadonlyUser = Readonly; const user: ReadonlyUser = { id: '1', name: 'John', email: 'john@example.com', age: 30, }; // user.name = 'Jane'; // Error: Cannot assign to 'name' because it is a read-only property // Deep readonly for nested objects type DeepReadonly = { readonly [P in keyof T]: T[P] extends object ? DeepReadonly : T[P]; }; // Record creates an object type with specific keys and value type type UserRole = 'admin' | 'editor' | 'viewer'; type RolePermissions = Record; // { admin: string[]; editor: string[]; viewer: string[]; } const permissions: RolePermissions = { admin: ['read', 'write', 'delete'], editor: ['read', 'write'], viewer: ['read'], }; // Record with complex types type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'; type RouteHandler = (req: Request) => Response; type RouteHandlers = Record; ``` ### Extract and Exclude ```typescript type Status = 'pending' | 'approved' | 'rejected' | 'cancelled'; // Extract types that are assignable to a condition type CompletedStatus = Extract; // 'approved' | 'rejected' // Exclude types that are assignable to a condition type ActiveStatus = Exclude; // 'pending' // Practical example type Shape = | { kind: 'circle'; radius: number } | { kind: 'square'; side: number } | { kind: 'rectangle'; width: number; height: number }; type CircularShape = Extract; // { kind: 'circle'; radius: number } type NonCircularShape = Exclude; // { kind: 'square'; side: number } | { kind: 'rectangle'; width: number; height: number } ``` ### ReturnType and Parameters ```typescript function createUser(name: string, age: number): User { return { id: generateId(), name, age, email: `${name.toLowerCase()}@example.com`, }; } // ReturnType extracts the return type of a function type UserFromFunction = ReturnType; // User // Parameters extracts parameter types as a tuple type CreateUserParams = Parameters; // [name: string, age: number] // Using with generic functions function processData(data: T[]): { count: number; items: T[] } { return { count: data.length, items: data }; } type ProcessResult = ReturnType>; // { count: number; items: User[] } ``` ## Mapped Types ### Basic Mapped Types ```typescript // Create a type where all properties are boolean type Flags = { [P in keyof T]: boolean; }; type UserFlags = Flags; // { id: boolean; name: boolean; email: boolean; age: boolean; } // Create a type where all properties are nullable type Nullable = { [P in keyof T]: T[P] | null; }; type NullableUser = Nullable; // { id: string | null; name: string | null; email: string | null; age: number | null; } // Create a type where all properties are functions type Getters = { [P in keyof T as `get${Capitalize}`]: () => T[P]; }; type UserGetters = Getters; // { getId: () => string; getName: () => string; getEmail: () => string; getAge: () => number; } ``` ### Mapped Type Modifiers ```typescript // Remove readonly modifier type Mutable = { -readonly [P in keyof T]: T[P]; }; interface ReadonlyPerson { readonly name: string; readonly age: number; } type MutablePerson = Mutable; // { name: string; age: number; } // Remove optional modifier type Concrete = { [P in keyof T]-?: T[P]; }; interface OptionalUser { name?: string; age?: number; } type ConcreteUser = Concrete; // { name: string; age: number; } // Add optional modifier type Optional = { [P in keyof T]+?: T[P]; }; ``` ### Advanced Mapped Types ```typescript // Transform property types type Promisify = { [P in keyof T]: Promise; }; type AsyncUser = Promisify; // { id: Promise; name: Promise; email: Promise; age: Promise; } // Wrap values in objects type Boxed = { [P in keyof T]: { value: T[P] }; }; type BoxedUser = Boxed; // { id: { value: string }; name: { value: string }; ... } // Create proxy type type Proxy = { get(): T; set(value: T): void; }; type ProxiedProperties = { [P in keyof T]: Proxy; }; ``` ## Conditional Types ### Basic Conditional Types ```typescript // T extends U ? X : Y type IsString = T extends string ? true : false; type Test1 = IsString; // true type Test2 = IsString; // false // Nested conditionals type TypeName = T extends string ? 'string' : T extends number ? 'number' : T extends boolean ? 'boolean' : T extends undefined ? 'undefined' : T extends Function ? 'function' : 'object'; type T0 = TypeName; // 'string' type T1 = TypeName; // 'number' type T2 = TypeName<() => void>; // 'function' ``` ### Distributive Conditional Types ```typescript // Conditional types distribute over union types type ToArray = T extends any ? T[] : never; type StrOrNumArray = ToArray; // string[] | number[] (not (string | number)[]) // Non-distributive version type ToArrayNonDist = [T] extends [any] ? T[] : never; type StrOrNumArrayNonDist = ToArrayNonDist; // (string | number)[] // Filter out null and undefined type NonNullable = T extends null | undefined ? never : T; type MaybeString = string | null | undefined; type DefinitelyString = NonNullable; // string ``` ### Inferring Types with infer ```typescript // Infer return type type GetReturnType = T extends (...args: any[]) => infer R ? R : never; function example(): { x: number } { return { x: 42 }; } type ExampleReturn = GetReturnType; // { x: number } // Infer array element type type Flatten = T extends Array ? U : T; type Str = Flatten; // string type Num = Flatten; // number // Infer Promise type type Awaited = T extends Promise ? U : T; type PromiseString = Awaited>; // string type RegularString = Awaited; // string // Multiple infer usage type GetFirstArg = T extends (first: infer F, ...args: any[]) => any ? F : never; function multi(a: string, b: number, c: boolean): void {} type FirstArgType = GetFirstArg; // string ``` ## Template Literal Types ### Basic Template Literals ```typescript type World = 'world'; type Greeting = `hello ${World}`; // 'hello world' // With unions type Color = 'red' | 'blue' | 'green'; type Quantity = 'one' | 'two'; type ColoredQuantity = `${Quantity} ${Color}`; // 'one red' | 'one blue' | 'one green' | 'two red' | 'two blue' | 'two green' // Event names type EventName = 'click' | 'focus' | 'blur'; type EventHandler = `on${Capitalize}`; // 'onClick' | 'onFocus' | 'onBlur' ``` ### String Manipulation Types ```typescript // Built-in string manipulation types type UppercaseGreeting = Uppercase<'hello'>; // 'HELLO' type LowercaseGreeting = Lowercase<'HELLO'>; // 'hello' type CapitalizedGreeting = Capitalize<'hello'>; // 'Hello' type UncapitalizedGreeting = Uncapitalize<'Hello'>; // 'hello' // Combining with template literals type GetterName = `get${Capitalize}`; type SetterName = `set${Capitalize}`; type UserNameGetter = GetterName<'name'>; // 'getName' type UserNameSetter = SetterName<'name'>; // 'setName' // Generate accessor methods type Accessors = { [K in keyof T as GetterName]: () => T[K]; } & { [K in keyof T as SetterName]: (value: T[K]) => void; }; type UserAccessors = Accessors; // { getName: () => string; setName: (value: string) => void; ... } ``` ### Pattern Matching with Template Literals ```typescript // Extract parts from string patterns type ExtractRouteParams = T extends `${infer Start}/:${infer Param}/${infer Rest}` ? { [K in Param | keyof ExtractRouteParams<`/${Rest}`>]: string } : T extends `${infer Start}/:${infer Param}` ? { [K in Param]: string } : {}; type Route1 = ExtractRouteParams<'/users/:userId/posts/:postId'>; // { userId: string; postId: string; } type Route2 = ExtractRouteParams<'/posts/:id'>; // { id: string; } // Parse CSS properties type CSSProperty = | 'color' | 'background-color' | 'font-size' | 'margin-top'; type CamelCase = S extends `${infer P1}-${infer P2}${infer P3}` ? `${P1}${Uppercase}${CamelCase}` : S; type CSSPropertyCamel = CamelCase; // 'color' | 'backgroundColor' | 'fontSize' | 'marginTop' ``` ## Key Remapping ### Remapping Keys in Mapped Types ```typescript // Filter out specific keys type OmitByType = { [P in keyof T as T[P] extends U ? never : P]: T[P]; }; interface Mixed { name: string; age: number; isActive: boolean; count: number; } type OnlyStrings = OmitByType; // { name: string; } // Rename keys with a prefix type Prefix = { [K in keyof T as `${P}${string & K}`]: T[K]; }; type PrefixedUser = Prefix; // { user_id: string; user_name: string; user_email: string; user_age: number; } // Convert to getter methods type Getters = { [K in keyof T as `get${Capitalize}`]: () => T[K]; }; type UserGetters = Getters; ``` ### Conditional Key Remapping ```typescript // Only include keys that match a condition type PickByType = { [P in keyof T as T[P] extends U ? P : never]: T[P]; }; type NumberProperties = PickByType; // { age: number; count: number; } // Rename keys based on type type RenameByType = { [K in keyof T as T[K] extends string ? `str_${string & K}` : T[K] extends number ? `num_${string & K}` : K]: T[K]; }; type RenamedMixed = RenameByType; // { str_name: string; num_age: number; isActive: boolean; num_count: number; } ``` ## Advanced Type Manipulation ### Recursive Types ```typescript // JSON type type JSONValue = | string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue }; const json: JSONValue = { name: 'John', age: 30, hobbies: ['reading', 'coding'], address: { city: 'New York', coordinates: [40.7128, -74.006], }, }; // Recursive path type type Path = T extends object ? { [K in keyof T]: K extends string ? T[K] extends object ? K | `${K}.${Path}` : K : never; }[keyof T] : never; type UserPath = Path; // 'id' | 'name' | 'email' | 'age' | ... // Deep partial type DeepPartial = { [P in keyof T]?: T[P] extends object ? DeepPartial : T[P]; }; ``` ### Union and Intersection Utilities ```typescript // Union to intersection type UnionToIntersection = ( U extends any ? (x: U) => void : never ) extends (x: infer I) => void ? I : never; type Union = { a: string } | { b: number }; type Intersection = UnionToIntersection; // { a: string } & { b: number } // Get required keys type RequiredKeys = { [K in keyof T]-?: {} extends Pick ? never : K; }[keyof T]; interface PartialRequired { required: string; optional?: number; } type Required = RequiredKeys; // 'required' // Get optional keys type OptionalKeys = { [K in keyof T]-?: {} extends Pick ? K : never; }[keyof T]; type Optional = OptionalKeys; // 'optional' ``` ### Function Type Utilities ```typescript // Make function async type Asyncify any> = ( ...args: Parameters ) => Promise>; function syncFunction(x: number): string { return x.toString(); } type AsyncFunction = Asyncify; // (x: number) => Promise // Curry function type type Curry = T extends ( arg: infer A, ...args: infer R ) => infer Return ? (arg: A) => R extends [] ? Return : Curry<(...args: R) => Return> : never; type CurriedFunction = Curry<(a: string, b: number, c: boolean) => void>; // (arg: string) => (arg: number) => (arg: boolean) => void ``` ### Builder Pattern Types ```typescript // Type-safe builder pattern type Builder = { [K in keyof T]: ( value: T[K] ) => Builder, R & Pick>; } & (R extends T ? { build(): T } : {}); interface Config { host: string; port: number; ssl: boolean; } function createBuilder(): Builder { const values: Partial = {}; const builder = new Proxy( {}, { get(_, prop) { if (prop === 'build') { return () => values as T; } return (value: any) => { values[prop as keyof T] = value; return builder; }; }, } ) as Builder; return builder; } // Usage with full type safety const config = createBuilder() .host('localhost') .port(3000) .ssl(true) .build(); // Only available when all properties are set ``` ## Type Inference Helpers ### Const Assertions ```typescript // Without const assertion const colors1 = ['red', 'blue', 'green']; type Colors1 = typeof colors1; // string[] // With const assertion const colors2 = ['red', 'blue', 'green'] as const; type Colors2 = typeof colors2; // readonly ['red', 'blue', 'green'] type Color = Colors2[number]; // 'red' | 'blue' | 'green' // Object with const assertion const config = { api: { url: 'https://api.example.com', timeout: 5000, }, } as const; type ConfigUrl = typeof config.api.url; // 'https://api.example.com' ``` ### Type Guards with User-Defined Type Guards ```typescript function isString(value: unknown): value is string { return typeof value === 'string'; } function isUser(value: unknown): value is User { return ( typeof value === 'object' && value !== null && 'id' in value && 'name' in value && 'email' in value ); } // Generic type guard factory function hasProperty( key: K ): (obj: T) => obj is T & Record { return (obj): obj is T & Record => { return typeof obj === 'object' && obj !== null && key in obj; }; } const hasName = hasProperty('name'); if (hasName(someObject)) { console.log(someObject.name); // Type-safe access } ``` ## Best Practices 1. **Prefer Built-in Utility Types**: Use TypeScript's built-in utility types (Partial, Pick, Omit, etc.) before creating custom ones for better readability. 2. **Use Const Assertions**: Apply const assertions to arrays and objects when you need literal types instead of widened types. 3. **Keep Types Simple**: Avoid overly complex type transformations. If a type becomes hard to understand, consider refactoring or using multiple simpler types. 4. **Document Complex Types**: Add comments to explain non-obvious type transformations, especially for mapped and conditional types. 5. **Leverage Type Inference**: Let TypeScript infer types when possible rather than explicitly declaring them everywhere. 6. **Use Template Literal Types for Strings**: For string patterns and concatenation, template literal types provide type safety that plain strings cannot. 7. **Prefer Type over Interface for Utilities**: Use type aliases for utility types and mapped types, as they're more flexible than interfaces. 8. **Test Your Types**: Write test cases for complex types using type assertions to ensure they behave as expected. 9. **Avoid Type Gymnastics**: Don't create complex types just because you can. Focus on types that add value and clarity to your code. 10. **Use Discriminated Unions**: For variant types, use discriminated unions with a literal type field for better type narrowing. ## Common Pitfalls 1. **Excessive Type Complexity**: Creating overly complex types makes code harder to understand and can slow down the TypeScript compiler. 2. **Ignoring Type Distribution**: Forgetting that conditional types distribute over unions can lead to unexpected type results. 3. **Misusing ReturnType with Generics**: Using ReturnType on generic functions without providing type arguments loses type information. 4. **Circular Type References**: Creating circular type dependencies can cause TypeScript errors or infinite type recursion. 5. **Over-using any**: Using any in utility types defeats their purpose and loses type safety benefits. 6. **Not Understanding Mapped Type Modifiers**: Misusing + and - modifiers or forgetting them can produce unexpected readonly/optional behavior. 7. **Template Literal Performance**: Complex template literal types with many unions can significantly slow down type checking. 8. **Forgetting as const**: Not using const assertions when you need literal types results in widened types that lose specificity. 9. **Mismatched Conditional Types**: Writing conditional type conditions that never match or always match makes types useless. 10. **Utility Type Overkill**: Creating utility types for simple operations that could be expressed directly makes code harder to read. ## When to Use This Skill Use TypeScript utility types when you need to: - Transform existing types without duplication - Create type-safe APIs and libraries - Build generic, reusable type utilities - Enforce type constraints at compile time - Generate types from runtime values - Create type-safe builders and fluent APIs - Model complex domain logic with types - Implement design patterns with type safety - Reduce type maintenance burden - Provide better IDE autocomplete and error messages This skill is essential for library authors, framework developers, TypeScript experts, and anyone building type-safe, maintainable TypeScript applications. ## Resources ### Official Documentation - TypeScript Handbook - Utility Types: - TypeScript Handbook - Mapped Types: - TypeScript Handbook - Conditional Types: - TypeScript Handbook - Template Literal Types: ### Learning Resources - Type Challenges: - TypeScript Deep Dive: - Total TypeScript: - Effective TypeScript by Dan Vanderkam ### Tools and Libraries - ts-toolbelt: - Advanced type utilities - type-fest: - Essential TypeScript types - utility-types: - Collection of utility types - TypeScript Playground: - Interactive type exploration ### Community - TypeScript GitHub Discussions: - Stack Overflow TypeScript Tag: - r/typescript:

typescript-utility-types

Install this skill

Comments