Alexander Opalic
TypeScript Type Extraction Patterns
Learn powerful TypeScript patterns for extracting and transforming nested types from complex interfaces.
Extract Nested Types from Complex Interfaces
interface GetTodoQuery {
todo?: {
id: number;
title: string;
completed: boolean;
tags?: Array<{
id: number;
name: string;
color: string;
}> | null;
collaborators?: Array<{
userId: number;
role: 'VIEWER' | 'EDITOR';
joinedAt: string;
}> | null;
}
}
// Extract nested types with proper type narrowing
type TodoTags = NonNullable<NonNullable<GetTodoQuery['todo']>['tags']>;
type TodoTag = TodoTags[number];
Key Patterns
- Handle optional properties:
NonNullable<T>
removesundefined
andnull
- Access nested types: Chain properties using
['prop']
- Extract array item type: Use
[number]
index
Perfect for working with GraphQL queries and complex API responses where you need to extract specific nested types with proper type narrowing.
#typescript
#types
#patterns