# TypeScript Type Extraction Patterns



## Extract Nested Types from Complex Interfaces

```ts
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

1. Handle optional properties: `NonNullable<T>` removes `undefined` and `null`
2. Access nested types: Chain properties using `['prop']`
3. 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.

---

--- title: Better Type Inference with TypeScript Array Filters description: How to improve TypeScript type inference when filtering arrays using type guards tags: ['typescript', 'arrays', 'type-inference'] url: https://alexop.dev/tils/typescript-array-filter-type-inference ---