Typescript Advanced Types

作者 wshobson46891e7e60da无许可证收录于 2026年10月8日更新于 2026年10月8日

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.

仅含说明Software Development
AI 生成的概览

讲解 TypeScript 高级类型：泛型、条件类型、映射类型、模板字面量类型与工具类型。

功能
通过带注释的代码示例讲解 TypeScript 高级类型系统，涵盖泛型与约束、条件类型与类型推断、映射类型与键重映射、模板字面量类型以及内置工具类型。还给出最佳实践、类型测试辅助类型、常见陷阱与性能注意事项，并指向 references/details.md 获取进阶模式。
适用场景
适用于构建类型安全的库、框架或 API 客户端，创建可复用的泛型组件，实现复杂类型推断，设计表单校验或强类型配置与状态管理，或将 JavaScript 代码迁移到 TypeScript 时。
运行要求
无需脚本或工具，仅为说明性内容；进阶模式需阅读 references/details.md。应用这些指导需要具备 TypeScript 知识并处于 TypeScript 项目中。

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:

typescript
function identity<T>(value: T): T {  return value;}
const num = identity<number>(42); // Type: numberconst str = identity<string>("hello"); // Type: stringconst auto = identity(true); // Type inferred: boolean

Generic Constraints:

typescript
interface HasLength {  length: number;}
function logLength<T extends HasLength>(item: T): T {  console.log(item.length);  return item;}
logLength("hello"); // OK: string has lengthlogLength([1, 2, 3]); // OK: array has lengthlogLength({ length: 10 }); // OK: object has length// logLength(42);             // Error: number has no length

Multiple Type Parameters:

typescript
function merge<T, U>(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:

typescript
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // truetype B = IsString<number>; // false

Extracting Return Types:

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

Distributive Conditional Types:

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

Nested Conditions:

typescript
type TypeName<T> = 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>; // "string"type T2 = TypeName<() => void>; // "function"

3. Mapped Types

Purpose: Transform existing types by iterating over their properties.

Basic Mapped Type:

typescript
type Readonly<T> = {  readonly [P in keyof T]: T[P];};
interface User {  id: number;  name: string;}
type ReadonlyUser = Readonly<User>;// Type: { readonly id: number; readonly name: string; }

Optional Properties:

typescript
type Partial<T> = {  [P in keyof T]?: T[P];};
type PartialUser = Partial<User>;// Type: { id?: number; name?: string; }

Key Remapping:

typescript
type Getters<T> = {  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];};
interface Person {  name: string;  age: number;}
type PersonGetters = Getters<Person>;// Type: { getName: () => string; getAge: () => number; }

Filtering Properties:

typescript
type PickByType<T, U> = {  [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<Mixed, number>;// Type: { id: number; age: number; }

4. Template Literal Types

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

Basic Template Literal:

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

String Manipulation:

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

Path Building:

typescript
type Path<T> = T extends object  ? {      [K in keyof T]: K extends string ? `${K}` | `${K}.${Path<T[K]>}` : never;    }[keyof T]  : never;
interface Config {  server: {    host: string;    port: number;  };  database: {    url: string;  };}
type ConfigPath = Path<Config>;// Type: "server" | "database" | "server.host" | "server.port" | "database.url"

5. Utility Types

Built-in Utility Types:

typescript
// Partial<T> - Make all properties optionaltype PartialUser = Partial<User>;
// Required<T> - Make all properties requiredtype RequiredUser = Required<PartialUser>;
// Readonly<T> - Make all properties readonlytype ReadonlyUser = Readonly<User>;
// Pick<T, K> - Select specific propertiestype UserName = Pick<User, "name" | "email">;
// Omit<T, K> - Remove specific propertiestype UserWithoutPassword = Omit<User, "password">;
// Exclude<T, U> - Exclude types from uniontype T1 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
// Extract<T, U> - Extract types from uniontype T2 = Extract<"a" | "b" | "c", "a" | "b">; // "a" | "b"
// NonNullable<T> - Exclude null and undefinedtype T3 = NonNullable<string | null | undefined>; // string
// Record<K, T> - Create object type with keys K and values Ttype PageInfo = Record<"home" | "about", { title: string }>;

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

typescript
// Type assertion teststype AssertEqual<T, U> = [T] extends [U]  ? [U] extends [T]    ? true    : false  : false;
type Test1 = AssertEqual<string, string>; // truetype Test2 = AssertEqual<string, number>; // falsetype Test3 = AssertEqual<string | number, string>; // false
// Expect error helpertype ExpectError<T extends never> = T;
// Example usagetype ShouldError = ExpectError<AssertEqual<string, number>>;

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

来源与署名

来源：wshobson/agents位于plugins/javascript-typescript/skills/typescript-advanced-types提交46891e7

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 wshobson/agents 的技能

Uv Package Manager

wshobson

关于使用 uv Python 包管理器管理依赖、虚拟环境和项目工作流的参考指南。

Software Development2026年10月8日

Web Component Design

wshobson

指导在 React、Vue 和 Svelte 中构建可复用 UI 组件，涵盖组合模式、CSS-in-JS 选择与组件 API 设计。

Software Development2026年10月8日

Python Type Safety

wshobson

指导 Python 类型注解、泛型、协议以及 mypy/pyright 严格类型检查。

Software Development2026年10月8日

Visual Design Foundations

wshobson

指导排版、色彩、间距与图标设计，帮助建立统一且无障碍的视觉设计体系。

Design & Creative2026年10月8日

Responsive Design

wshobson

指导使用容器查询、流体排版、CSS Grid 和断点策略实现响应式网页布局。

Software Development2026年10月8日

Python Resource Management

wshobson

指导 Python 开发者使用上下文管理器、清理模式和流式处理来确定性管理资源。

Software Development2026年10月8日

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Testing Strategy

anthropics

精选

设计测试策略与测试计划，涵盖测试类型、覆盖率目标与示例测试用例。

Software Development27K今天更新

Tech Debt

anthropics

精选

识别、分类并排序技术债务，产出评分后的待办清单与分阶段整改计划。

Software Development27K今天更新

System Design

anthropics

精选

通过需求、高层设计、深入设计、扩展与权衡分析来指导系统与架构设计。

Software Development27K今天更新