Typescript Advanced Types

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:

function identity(value: T): T {
  return value;
}

const num = identity(42); // Type: number
const str = identity("hello"); // Type: string
const auto = identity(true); // Type inferred: boolean

Generic Constraints:

interface HasLength {
  length: number;
}

function logLength(item: T): T {
  console.log(item.length);
  return item;
}

logLength("hello"); // OK: string has length
logLength([1, 2, 3]); // OK: array has length
logLength({ length: 10 }); // OK: object has length
// logLength(42);             // Error: number has no length

Multiple Type Parameters:

function merge(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const merged = merge({ name: "John" }, { age: 30 });
// Type: { name: string } & { age: number }

2. Conditional Types

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

Basic Conditional Type:

type IsString = T extends string ? true : false;

type A = IsString; // true
type B = IsString; // false

Extracting Return Types:

type ReturnType = T extends (...args: any[]) => infer R ? R : never;

function getUser() {
  return { id: 1, name: "John" };
}

type User = ReturnType;
// Type: { id: number; name: string; }

Distributive Conditional Types:

type ToArray = T extends any ? T[] : never;

type StrOrNumArray = ToArray;
// Type: string[] | number[]

Nested Conditions:

type TypeName = T extends string
  ? "string"
  : T extends number
    ? "number"
    : T extends boolean
      ? "boolean"
      : T extends undefined
        ? "undefined"
        : T extends Function
          ? "function"
          : "object";

type T1 = TypeName; // "string"
type T2 = TypeName void>; // "function"

3. Mapped Types

Purpose: Transform existing types by iterating over their properties.

Basic Mapped Type:

type Readonly = {
  readonly [P in keyof T]: T[P];
};

interface User {
  id: number;
  name: string;
}

type ReadonlyUser = Readonly;
// Type: { readonly id: number; readonly name: string; }

Optional Properties:

type Partial = {
  [P in keyof T]?: T[P];
};

type PartialUser = Partial;
// Type: { id?: number; name?: string; }

Key Remapping:

type Getters = {
  [K in keyof T as `get${Capitalize}`]: () => T[K];
};

interface Person {
  name: string;
  age: number;
}

type PersonGetters = Getters;
// Type: { getName: () => string; getAge: () => number; }

Filtering Properties:

type PickByType = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};

interface Mixed {
  id: number;
  name: string;
  age: number;
  active: boolean;
}

type OnlyNumbers = PickByType;
// Type: { id: number; age: number; }

4. Template Literal Types

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

Basic Template Literal:

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

String Manipulation:

type UppercaseGreeting = Uppercase; // "HELLO"
type LowercaseGreeting = Lowercase; // "hello"
type CapitalizedName = Capitalize; // "John"
type UncapitalizedName = Uncapitalize; // "john"

Path Building:

type Path = T extends object
  ? {
      [K in keyof T]: K extends string ? `${K}` | `${K}.${Path}` : never;
    }[keyof T]
  : never;

interface Config {
  server: {
    host: string;
    port: number;
  };
  database: {
    url: string;
  };
}

type ConfigPath = Path;
// Type: "server" | "database" | "server.host" | "server.port" | "database.url"

5. Utility Types

Built-in Utility Types:

// Partial - Make all properties optional
type PartialUser = Partial;

// Required - Make all properties required
type RequiredUser = Required;

// Readonly - Make all properties readonly
type ReadonlyUser = Readonly;

// Pick - Select specific properties
type UserName = Pick;

// Omit - Remove specific properties
type UserWithoutPassword = Omit;

// Exclude - Exclude types from union
type T1 = Exclude; // "b" | "c"

// Extract - Extract types from union
type T2 = Extract; // "a" | "b"

// NonNullable - Exclude null and undefined
type T3 = NonNullable; // string

// Record - Create object type with keys K and values T
type PageInfo = Record;

Detailed worked examples and patterns

Detailed sections (starting with ## Advanced Patterns) live in references/details.md. Read that file when the navigation summary above is insufficient.

Best Practices

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

Type Testing

// Type assertion tests
type AssertEqual = [T] extends [U]
  ? [U] extends [T]
    ? true
    : false
  : false;

type Test1 = AssertEqual; // true
type Test2 = AssertEqual; // false
type Test3 = AssertEqual; // false

// Expect error helper
type ExpectError = T;

// Example usage
type ShouldError = ExpectError>;

Common Pitfalls

1. Over-using any: Defeats the purpose of TypeScript
2. Ignoring strict null checks: Can lead to runtime errors
3. Too complex types: Can slow down compilation
4. Not using discriminated unions: Misses type narrowing opportunities
5. Forgetting readonly modifiers: Allows unintended mutations
6. Circular type references: Can cause compiler errors
7. 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ValorVie
• Source: ValorVie/custom-skills
• License: MIT

Install and usage instructions live in the source repository linked above.