TypeScript Advanced Types

Advanced TypeScript Types

Key Advanced Type Features

Mapped Types

Conditional Types

Template Literal Types

Utility Types

: Built - in type helpers for common transformations

Recursive Types

: Self - referential types for tree - like structures

Type Inference

Mapped Types

Basic Mapped Type

Example

// Convert all properties to boolean type Flags<T> = {
[K in keyof T]: boolean;
};
interface User {
id: number;
name: string;
email: string;
}
type UserFlags = Flags<User>;

// {
//   id: boolean;
//   name: boolean;
//   email: boolean;
// }

Mapped Type Modifiers

Example

// Make all properties optional interface Todo {
title: string;
description: string;
completed: boolean;
}
type OptionalTodo = {
[K in keyof Todo]?: Todo[K];
};
// Remove 'readonly' and '?' modifiers type Concrete<T> = {
-readonly [K in keyof T]-?: T[K];
};
// Add 'readonly' and 'required' to all properties type ReadonlyRequired<T> = {
+readonly [K in keyof T]-?: T[K];
};

Key Remapping

Example

// Add prefix to all property names type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type UserGetters = Getters<User>;
// {
//   getId: () => number;
//   getName: () => string;
//   getEmail: () => string;
// }
// Filter out properties type MethodsOnly<T> = {
[K in keyof T as T[K] extends Function ? K : never]: T[K];
};

Conditional Types

Basic Conditional Types

type A = IsString<string>;    // true type B = IsString<number>;    // false type C = IsString<'hello'>;    // true type D = IsString<string | number>; // boolean

// Extract array element type type ArrayElement < T > = T extends (infer U)[] ? U : never;

type Numbers = ArrayElement<number[]>; // number

Infer Keyword

Example

// Get return type of a function type ReturnType < T > = T extends (...args: any[]) => infer R ? R : any;
// Get parameter types as a tuple type Parameters < T > = T extends (...args: infer P) => any ? P : never;
// Get constructor parameter types type ConstructorParameters < T extends new (...args: any) => any > =

T extends new (...args: infer P) => any ? P : never;

// Get instance type from a constructor type InstanceType < T extends new (...args: any) => any > =

T extends new (...args: any) => infer R ? R : any;

Distributed Conditional Types

Example

// Without distribution type ToArrayNonDist < T > = T extends any ? T[] : never;

type StrOrNumArr = ToArrayNonDist<string | number>; // (string | number)[]

// With distribution type ToArray < T > = [T] extends [any] ? T[] : never;

type StrOrNumArr2 = ToArray<string | number>; // string[] | number[]

// Filter out non - string types type FilterStrings < T > = T extends string ? T : never;

type Letters = FilterStrings<'a' | 'b' | 1 | 2 | 'c'>; // 'a' | 'b' | 'c'

Template Literal Types

Basic Template Literal Types

Example type Greeting = `Hello, ${string}`;
const validGreeting: Greeting = 'Hello, World!';
const invalidGreeting: Greeting = 'Hi there!'; // Error
// With unions type Color = 'red' | 'green' | 'blue';
type Size = 'small' | 'medium' | 'large';
type Style = `${Color}-${Size}`;

// 'red - small' | 'red - medium' | 'red - large' |
// 'green - small' | 'green - medium' | 'green - large' |
// 'blue - small' | 'blue - medium' | 'blue - large'

String Manipulation Types

Apply built - in helpers to transform string literal types (uppercasing, capitalizing, etc.).