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今天更新

Dpop Adoption

google

精選

指導為 Google OAuth 平台實作 OAuth 2.0 DPoP（RFC 9449）傳送方約束的更新權杖。

Software Development21K今天更新

Gemini Live Api

google

精選

產生 Gemini Live API WebSocket 用戶端類別、測試、文件，以及用於雙向串流的示範介面。

Software Development21K今天更新

Gemini Api

google

精選

說明如何在 Google Agent Platform 上使用 Gen AI SDK 呼叫 Gemini API，涵蓋多種語言與多項功能。

Software Development21K今天更新