Typescript Advanced Types

Master TypeScript's advanced types for bulletproof type-safe applications

✨ The solution you've been looking for

Verified

Tested and verified by our team

25450 Stars

Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.

typescript generics conditional-types mapped-types type-safety frontend javascript static-typing

Repository

See It In Action

Interactive preview & real-world examples

Live Demo

AI Conversation Simulator

See how users interact with this skill

User Prompt

Help me build a type-safe API client where the request parameters and response types are automatically inferred from my endpoint configuration

Skill Processing

Analyzing request...

Agent Response

Complete implementation using conditional types and mapped types that provides compile-time safety for all API calls

Quick Start (3 Steps)

Get up and running in minutes

Install

claude-code skill install typescript-advanced-types

claude-code skill install typescript-advanced-types

Config

First Trigger

@typescript-advanced-types help

Commands

Command	Description	Required Args
@typescript-advanced-types type-safe-api-client-builder	Create a fully type-safe HTTP client with automatic request/response type inference	None
@typescript-advanced-types advanced-form-validation-system	Build a generic form validator with type-safe validation rules and error handling	None
@typescript-advanced-types complex-state-management-types	Implement type-safe state machines and reducers with exhaustive pattern matching	None

Typical Use Cases

Type-Safe API Client Builder

Create a fully type-safe HTTP client with automatic request/response type inference

Advanced Form Validation System

Build a generic form validator with type-safe validation rules and error handling

Complex State Management Types

Implement type-safe state machines and reducers with exhaustive pattern matching

Overview

TypeScript Advanced Types

Comprehensive guidance for mastering TypeScript’s advanced type system including generics, conditional types, mapped types, template literal types, and utility types for building robust, type-safe applications.

When to Use This Skill

Building type-safe libraries or frameworks
Creating reusable generic components
Implementing complex type inference logic
Designing type-safe API clients
Building form validation systems
Creating strongly-typed configuration objects
Implementing type-safe state management
Migrating JavaScript codebases to TypeScript

Core Concepts

1. Generics

Purpose: Create reusable, type-flexible components while maintaining type safety.

Basic Generic Function:

1function identity<T>(value: T): T {
2  return value;
3}
4
5const num = identity<number>(42); // Type: number
6const str = identity<string>("hello"); // Type: string
7const auto = identity(true); // Type inferred: boolean

Generic Constraints:

 1interface HasLength {
 2  length: number;
 3}
 4
 5function logLength<T extends HasLength>(item: T): T {
 6  console.log(item.length);
 7  return item;
 8}
 9
10logLength("hello"); // OK: string has length
11logLength([1, 2, 3]); // OK: array has length
12logLength({ length: 10 }); // OK: object has length
13// logLength(42);             // Error: number has no length

Multiple Type Parameters:

1function merge<T, U>(obj1: T, obj2: U): T & U {
2  return { ...obj1, ...obj2 };
3}
4
5const merged = merge({ name: "John" }, { age: 30 });
6// Type: { name: string } & { age: number }

2. Conditional Types

Purpose: Create types that depend on conditions, enabling sophisticated type logic.

Basic Conditional Type:

1type IsString<T> = T extends string ? true : false;
2
3type A = IsString<string>; // true
4type B = IsString<number>; // false

Extracting Return Types:

1type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
2
3function getUser() {
4  return { id: 1, name: "John" };
5}
6
7type User = ReturnType<typeof getUser>;
8// Type: { id: number; name: string; }

Distributive Conditional Types:

1type ToArray<T> = T extends any ? T[] : never;
2
3type StrOrNumArray = ToArray<string | number>;
4// Type: string[] | number[]

Nested Conditions:

 1type TypeName<T> = T extends string
 2  ? "string"
 3  : T extends number
 4    ? "number"
 5    : T extends boolean
 6      ? "boolean"
 7      : T extends undefined
 8        ? "undefined"
 9        : T extends Function
10          ? "function"
11          : "object";
12
13type T1 = TypeName<string>; // "string"
14type T2 = TypeName<() => void>; // "function"

3. Mapped Types

Purpose: Transform existing types by iterating over their properties.

Basic Mapped Type:

 1type Readonly<T> = {
 2  readonly [P in keyof T]: T[P];
 3};
 4
 5interface User {
 6  id: number;
 7  name: string;
 8}
 9
10type ReadonlyUser = Readonly<User>;
11// Type: { readonly id: number; readonly name: string; }

Optional Properties:

1type Partial<T> = {
2  [P in keyof T]?: T[P];
3};
4
5type PartialUser = Partial<User>;
6// Type: { id?: number; name?: string; }

Key Remapping:

 1type Getters<T> = {
 2  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
 3};
 4
 5interface Person {
 6  name: string;
 7  age: number;
 8}
 9
10type PersonGetters = Getters<Person>;
11// Type: { getName: () => string; getAge: () => number; }

Filtering Properties:

 1type PickByType<T, U> = {
 2  [K in keyof T as T[K] extends U ? K : never]: T[K];
 3};
 4
 5interface Mixed {
 6  id: number;
 7  name: string;
 8  age: number;
 9  active: boolean;
10}
11
12type OnlyNumbers = PickByType<Mixed, number>;
13// Type: { id: number; age: number; }

4. Template Literal Types

Purpose: Create string-based types with pattern matching and transformation.

Basic Template Literal:

1type EventName = "click" | "focus" | "blur";
2type EventHandler = `on${Capitalize<EventName>}`;
3// Type: "onClick" | "onFocus" | "onBlur"

String Manipulation:

1type UppercaseGreeting = Uppercase<"hello">; // "HELLO"
2type LowercaseGreeting = Lowercase<"HELLO">; // "hello"
3type CapitalizedName = Capitalize<"john">; // "John"
4type UncapitalizedName = Uncapitalize<"John">; // "john"

Path Building:

 1type Path<T> = T extends object
 2  ? {
 3      [K in keyof T]: K extends string ? `${K}` | `${K}.${Path<T[K]>}` : never;
 4    }[keyof T]
 5  : never;
 6
 7interface Config {
 8  server: {
 9    host: string;
10    port: number;
11  };
12  database: {
13    url: string;
14  };
15}
16
17type ConfigPath = Path<Config>;
18// Type: "server" | "database" | "server.host" | "server.port" | "database.url"

5. Utility Types

Built-in Utility Types:

 1// Partial<T> - Make all properties optional
 2type PartialUser = Partial<User>;
 3
 4// Required<T> - Make all properties required
 5type RequiredUser = Required<PartialUser>;
 6
 7// Readonly<T> - Make all properties readonly
 8type ReadonlyUser = Readonly<User>;
 9
10// Pick<T, K> - Select specific properties
11type UserName = Pick<User, "name" | "email">;
12
13// Omit<T, K> - Remove specific properties
14type UserWithoutPassword = Omit<User, "password">;
15
16// Exclude<T, U> - Exclude types from union
17type T1 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
18
19// Extract<T, U> - Extract types from union
20type T2 = Extract<"a" | "b" | "c", "a" | "b">; // "a" | "b"
21
22// NonNullable<T> - Exclude null and undefined
23type T3 = NonNullable<string | null | undefined>; // string
24
25// Record<K, T> - Create object type with keys K and values T
26type PageInfo = Record<"home" | "about", { title: string }>;

Advanced Patterns

Pattern 1: Type-Safe Event Emitter

 1type EventMap = {
 2  "user:created": { id: string; name: string };
 3  "user:updated": { id: string };
 4  "user:deleted": { id: string };
 5};
 6
 7class TypedEventEmitter<T extends Record<string, any>> {
 8  private listeners: {
 9    [K in keyof T]?: Array<(data: T[K]) => void>;
10  } = {};
11
12  on<K extends keyof T>(event: K, callback: (data: T[K]) => void): void {
13    if (!this.listeners[event]) {
14      this.listeners[event] = [];
15    }
16    this.listeners[event]!.push(callback);
17  }
18
19  emit<K extends keyof T>(event: K, data: T[K]): void {
20    const callbacks = this.listeners[event];
21    if (callbacks) {
22      callbacks.forEach((callback) => callback(data));
23    }
24  }
25}
26
27const emitter = new TypedEventEmitter<EventMap>();
28
29emitter.on("user:created", (data) => {
30  console.log(data.id, data.name); // Type-safe!
31});
32
33emitter.emit("user:created", { id: "1", name: "John" });
34// emitter.emit("user:created", { id: "1" });  // Error: missing 'name'

Pattern 2: Type-Safe API Client

 1type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
 2
 3type EndpointConfig = {
 4  "/users": {
 5    GET: { response: User[] };
 6    POST: { body: { name: string; email: string }; response: User };
 7  };
 8  "/users/:id": {
 9    GET: { params: { id: string }; response: User };
10    PUT: { params: { id: string }; body: Partial<User>; response: User };
11    DELETE: { params: { id: string }; response: void };
12  };
13};
14
15type ExtractParams<T> = T extends { params: infer P } ? P : never;
16type ExtractBody<T> = T extends { body: infer B } ? B : never;
17type ExtractResponse<T> = T extends { response: infer R } ? R : never;
18
19class APIClient<Config extends Record<string, Record<HTTPMethod, any>>> {
20  async request<Path extends keyof Config, Method extends keyof Config[Path]>(
21    path: Path,
22    method: Method,
23    ...[options]: ExtractParams<Config[Path][Method]> extends never
24      ? ExtractBody<Config[Path][Method]> extends never
25        ? []
26        : [{ body: ExtractBody<Config[Path][Method]> }]
27      : [
28          {
29            params: ExtractParams<Config[Path][Method]>;
30            body?: ExtractBody<Config[Path][Method]>;
31          },
32        ]
33  ): Promise<ExtractResponse<Config[Path][Method]>> {
34    // Implementation here
35    return {} as any;
36  }
37}
38
39const api = new APIClient<EndpointConfig>();
40
41// Type-safe API calls
42const users = await api.request("/users", "GET");
43// Type: User[]
44
45const newUser = await api.request("/users", "POST", {
46  body: { name: "John", email: "john@example.com" },
47});
48// Type: User
49
50const user = await api.request("/users/:id", "GET", {
51  params: { id: "123" },
52});
53// Type: User

Pattern 3: Builder Pattern with Type Safety

 1type BuilderState<T> = {
 2  [K in keyof T]: T[K] | undefined;
 3};
 4
 5type RequiredKeys<T> = {
 6  [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
 7}[keyof T];
 8
 9type OptionalKeys<T> = {
10  [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
11}[keyof T];
12
13type IsComplete<T, S> =
14  RequiredKeys<T> extends keyof S
15    ? S[RequiredKeys<T>] extends undefined
16      ? false
17      : true
18    : false;
19
20class Builder<T, S extends BuilderState<T> = {}> {
21  private state: S = {} as S;
22
23  set<K extends keyof T>(key: K, value: T[K]): Builder<T, S & Record<K, T[K]>> {
24    this.state[key] = value;
25    return this as any;
26  }
27
28  build(this: IsComplete<T, S> extends true ? this : never): T {
29    return this.state as T;
30  }
31}
32
33interface User {
34  id: string;
35  name: string;
36  email: string;
37  age?: number;
38}
39
40const builder = new Builder<User>();
41
42const user = builder
43  .set("id", "1")
44  .set("name", "John")
45  .set("email", "john@example.com")
46  .build(); // OK: all required fields set
47
48// const incomplete = builder
49//   .set("id", "1")
50//   .build();  // Error: missing required fields

Pattern 4: Deep Readonly/Partial

 1type DeepReadonly<T> = {
 2  readonly [P in keyof T]: T[P] extends object
 3    ? T[P] extends Function
 4      ? T[P]
 5      : DeepReadonly<T[P]>
 6    : T[P];
 7};
 8
 9type DeepPartial<T> = {
10  [P in keyof T]?: T[P] extends object
11    ? T[P] extends Array<infer U>
12      ? Array<DeepPartial<U>>
13      : DeepPartial<T[P]>
14    : T[P];
15};
16
17interface Config {
18  server: {
19    host: string;
20    port: number;
21    ssl: {
22      enabled: boolean;
23      cert: string;
24    };
25  };
26  database: {
27    url: string;
28    pool: {
29      min: number;
30      max: number;
31    };
32  };
33}
34
35type ReadonlyConfig = DeepReadonly<Config>;
36// All nested properties are readonly
37
38type PartialConfig = DeepPartial<Config>;
39// All nested properties are optional

Pattern 5: Type-Safe Form Validation

 1type ValidationRule<T> = {
 2  validate: (value: T) => boolean;
 3  message: string;
 4};
 5
 6type FieldValidation<T> = {
 7  [K in keyof T]?: ValidationRule<T[K]>[];
 8};
 9
10type ValidationErrors<T> = {
11  [K in keyof T]?: string[];
12};
13
14class FormValidator<T extends Record<string, any>> {
15  constructor(private rules: FieldValidation<T>) {}
16
17  validate(data: T): ValidationErrors<T> | null {
18    const errors: ValidationErrors<T> = {};
19    let hasErrors = false;
20
21    for (const key in this.rules) {
22      const fieldRules = this.rules[key];
23      const value = data[key];
24
25      if (fieldRules) {
26        const fieldErrors: string[] = [];
27
28        for (const rule of fieldRules) {
29          if (!rule.validate(value)) {
30            fieldErrors.push(rule.message);
31          }
32        }
33
34        if (fieldErrors.length > 0) {
35          errors[key] = fieldErrors;
36          hasErrors = true;
37        }
38      }
39    }
40
41    return hasErrors ? errors : null;
42  }
43}
44
45interface LoginForm {
46  email: string;
47  password: string;
48}
49
50const validator = new FormValidator<LoginForm>({
51  email: [
52    {
53      validate: (v) => v.includes("@"),
54      message: "Email must contain @",
55    },
56    {
57      validate: (v) => v.length > 0,
58      message: "Email is required",
59    },
60  ],
61  password: [
62    {
63      validate: (v) => v.length >= 8,
64      message: "Password must be at least 8 characters",
65    },
66  ],
67});
68
69const errors = validator.validate({
70  email: "invalid",
71  password: "short",
72});
73// Type: { email?: string[]; password?: string[]; } | null

Pattern 6: Discriminated Unions

 1type Success<T> = {
 2  status: "success";
 3  data: T;
 4};
 5
 6type Error = {
 7  status: "error";
 8  error: string;
 9};
10
11type Loading = {
12  status: "loading";
13};
14
15type AsyncState<T> = Success<T> | Error | Loading;
16
17function handleState<T>(state: AsyncState<T>): void {
18  switch (state.status) {
19    case "success":
20      console.log(state.data); // Type: T
21      break;
22    case "error":
23      console.log(state.error); // Type: string
24      break;
25    case "loading":
26      console.log("Loading...");
27      break;
28  }
29}
30
31// Type-safe state machine
32type State =
33  | { type: "idle" }
34  | { type: "fetching"; requestId: string }
35  | { type: "success"; data: any }
36  | { type: "error"; error: Error };
37
38type Event =
39  | { type: "FETCH"; requestId: string }
40  | { type: "SUCCESS"; data: any }
41  | { type: "ERROR"; error: Error }
42  | { type: "RESET" };
43
44function reducer(state: State, event: Event): State {
45  switch (state.type) {
46    case "idle":
47      return event.type === "FETCH"
48        ? { type: "fetching", requestId: event.requestId }
49        : state;
50    case "fetching":
51      if (event.type === "SUCCESS") {
52        return { type: "success", data: event.data };
53      }
54      if (event.type === "ERROR") {
55        return { type: "error", error: event.error };
56      }
57      return state;
58    case "success":
59    case "error":
60      return event.type === "RESET" ? { type: "idle" } : state;
61  }
62}

Type Inference Techniques

1. Infer Keyword

 1// Extract array element type
 2type ElementType<T> = T extends (infer U)[] ? U : never;
 3
 4type NumArray = number[];
 5type Num = ElementType<NumArray>; // number
 6
 7// Extract promise type
 8type PromiseType<T> = T extends Promise<infer U> ? U : never;
 9
10type AsyncNum = PromiseType<Promise<number>>; // number
11
12// Extract function parameters
13type Parameters<T> = T extends (...args: infer P) => any ? P : never;
14
15function foo(a: string, b: number) {}
16type FooParams = Parameters<typeof foo>; // [string, number]

2. Type Guards

 1function isString(value: unknown): value is string {
 2  return typeof value === "string";
 3}
 4
 5function isArrayOf<T>(
 6  value: unknown,
 7  guard: (item: unknown) => item is T,
 8): value is T[] {
 9  return Array.isArray(value) && value.every(guard);
10}
11
12const data: unknown = ["a", "b", "c"];
13
14if (isArrayOf(data, isString)) {
15  data.forEach((s) => s.toUpperCase()); // Type: string[]
16}

3. Assertion Functions

 1function assertIsString(value: unknown): asserts value is string {
 2  if (typeof value !== "string") {
 3    throw new Error("Not a string");
 4  }
 5}
 6
 7function processValue(value: unknown) {
 8  assertIsString(value);
 9  // value is now typed as string
10  console.log(value.toUpperCase());
11}

Best Practices

Use unknown over any: Enforce type checking
Prefer interface for object shapes: Better error messages
Use type for unions and complex types: More flexible
Leverage type inference: Let TypeScript infer when possible
Create helper types: Build reusable type utilities
Use const assertions: Preserve literal types
Avoid type assertions: Use type guards instead
Document complex types: Add JSDoc comments
Use strict mode: Enable all strict compiler options
Test your types: Use type tests to verify type behavior

Type Testing

 1// Type assertion tests
 2type AssertEqual<T, U> = [T] extends [U]
 3  ? [U] extends [T]
 4    ? true
 5    : false
 6  : false;
 7
 8type Test1 = AssertEqual<string, string>; // true
 9type Test2 = AssertEqual<string, number>; // false
10type Test3 = AssertEqual<string | number, string>; // false
11
12// Expect error helper
13type ExpectError<T extends never> = T;
14
15// Example usage
16type ShouldError = ExpectError<AssertEqual<string, number>>;

Common Pitfalls

Over-using any: Defeats the purpose of TypeScript
Ignoring strict null checks: Can lead to runtime errors
Too complex types: Can slow down compilation
Not using discriminated unions: Misses type narrowing opportunities
Forgetting readonly modifiers: Allows unintended mutations
Circular type references: Can cause compiler errors
Not handling edge cases: Like empty arrays or null values

Performance Considerations

Avoid deeply nested conditional types
Use simple types when possible
Cache complex type computations
Limit recursion depth in recursive types
Use build tools to skip type checking in production

Resources

TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/
Type Challenges: https://github.com/type-challenges/type-challenges
TypeScript Deep Dive: https://basarat.gitbook.io/typescript/
Effective TypeScript: Book by Dan Vanderkam

What Users Are Saying

Real feedback from the community

Environment Matrix

Dependencies

TypeScript 4.0+

Framework Support

React ✓ (recommended for component typing) Vue.js ✓ Angular ✓ Node.js ✓ Express ✓

Typescript Advanced Types

See It In Action

AI Conversation Simulator

Quick Start (3 Steps)

Install

Config

First Trigger

Commands

Typical Use Cases

Type-Safe API Client Builder

Advanced Form Validation System

Complex State Management Types

Overview

TypeScript Advanced Types

When to Use This Skill

Core Concepts

1. Generics

2. Conditional Types

3. Mapped Types

4. Template Literal Types

5. Utility Types

Advanced Patterns

Pattern 1: Type-Safe Event Emitter

Pattern 2: Type-Safe API Client

Pattern 3: Builder Pattern with Type Safety

Pattern 4: Deep Readonly/Partial

Pattern 5: Type-Safe Form Validation

Pattern 6: Discriminated Unions

Type Inference Techniques

1. Infer Keyword

2. Type Guards

3. Assertion Functions

Best Practices

Type Testing

Common Pitfalls

Performance Considerations

Resources

What Users Are Saying

Environment Matrix

Dependencies

Framework Support

Context Window

Security & Privacy

Information

Related Skills

Typescript Advanced Types

Typescript

Typescript