[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f_4iJmp-y69LcrtoGnobNtpdZ_oD8VI6GYqB-eeHNX6k":3,"$fJU-4tot_gC5fDkujNeoE-cGsdMy5V_KcdUXLuAnTFgw":16,"$fgcmCLczQT3f4qHWy3vwYqBb8_UdLTsLwzG2NMD8bHqk":423},{"slug":4,"title":5,"description":6,"content":7,"content_html":8,"pub_date":9,"tags":10,"draft":15},"typescript-advanced-patterns","TypeScript 高级模式：让类型系统为你工作","基础 TS 会了但类型总是 any？条件类型、映射类型、模板字面量类型、infer 关键字才是 TS 的真正威力。","# TypeScript 高级模式：让类型系统为你工作\n\n> TypeScript 不是\"带类型的 JavaScript\"，类型系统本身是一门图灵完备的编程语言。掌握高级类型，能让很多运行时错误在编译时被捕获。\n\n## 类型 vs 接口\n\n```typescript\n\u002F\u002F interface：可以声明合并\ninterface User { name: string; }\ninterface User { age: number; }  \u002F\u002F 自动合并，不报错\n\u002F\u002F User 现在是 { name: string; age: number }\n\n\u002F\u002F type：不能声明合并，但更灵活\ntype StringOrNumber = string | number;\ntype Callback = (x: number) => void;\ntype Tuple = [string, number, boolean];\n```\n\n**选择原则：**\n- 对象形状的公共 API（库）：用 `interface`（允许用户扩展）\n- 联合类型、函数类型、复杂类型操作：用 `type`\n\n## 联合类型 + 交叉类型\n\n```typescript\n\u002F\u002F 联合类型（OR）\ntype ID = string | number;\n\n\u002F\u002F 交叉类型（AND）：合并多个类型\ntype Admin = User & { permissions: string[] };\n\n\u002F\u002F Discriminated Union（判别联合）：最有用的模式\ntype Shape =\n  | { kind: 'circle'; radius: number }\n  | { kind: 'rect'; width: number; height: number }\n  | { kind: 'triangle'; base: number; height: number };\n\nfunction area(shape: Shape): number {\n  switch (shape.kind) {\n    case 'circle':\n      return Math.PI * shape.radius ** 2;\n    case 'rect':\n      return shape.width * shape.height;\n    case 'triangle':\n      return 0.5 * shape.base * shape.height;\n  }\n}\n```\n\n## 类型守卫\n\n```typescript\n\u002F\u002F is 守卫\nfunction isString(x: unknown): x is string {\n  return typeof x === 'string';\n}\n\n\u002F\u002F in 守卫\ninterface Cat { meow(): void }\ninterface Dog { bark(): void }\nfunction makeSound(animal: Cat | Dog) {\n  if ('meow' in animal) {\n    animal.meow();  \u002F\u002F TypeScript 知道是 Cat\n  } else {\n    animal.bark();\n  }\n}\n\n\u002F\u002F asserts 守卫\nfunction assertNonNull\u003CT>(val: T | null | undefined): asserts val is T {\n  if (val == null) throw new Error('Expected non-null value');\n}\n\nconst user: User | null = getUser();\nassertNonNull(user);\nuser.name;  \u002F\u002F 确认非 null\n```\n\n## 条件类型\n\n```typescript\n\u002F\u002F 基本语法\ntype IsString\u003CT> = T extends string ? 'yes' : 'no';\ntype A = IsString\u003Cstring>;  \u002F\u002F 'yes'\ntype B = IsString\u003Cnumber>;  \u002F\u002F 'no'\n\n\u002F\u002F Distributive 特性（分配律）\n\u002F\u002F 当 T 是联合类型时，条件类型分别应用于每个成员\ntype ToArray\u003CT> = T extends unknown ? T[] : never;\ntype C = ToArray\u003Cstring | number>;  \u002F\u002F string[] | number[]\n\n\u002F\u002F 非分配版本（用元组包裹）\ntype ToArrayNonDist\u003CT> = [T] extends [unknown] ? T[] : never;\ntype D = ToArrayNonDist\u003Cstring | number>;  \u002F\u002F (string | number)[]\n```\n\n## infer：从类型中提取子类型\n\n`infer` 是条件类型中声明临时类型变量的关键字。\n\n```typescript\n\u002F\u002F ReturnType 的实现\ntype ReturnType\u003CT> = T extends (...args: any[]) => infer R ? R : never;\ntype Fn = () => { name: string; age: number };\ntype Result = ReturnType\u003CFn>;  \u002F\u002F { name: string; age: number }\n\n\u002F\u002F Parameters 的实现\ntype Parameters\u003CT> = T extends (...args: infer P) => any ? P : never;\ntype Params = Parameters\u003C(x: number, y: string) => void>;  \u002F\u002F [number, string]\n\n\u002F\u002F Awaited 的实现\ntype Awaited\u003CT> = T extends Promise\u003Cinfer U> ? Awaited\u003CU> : T;\ntype Unwrapped = Awaited\u003CPromise\u003CPromise\u003Cstring>>>;  \u002F\u002F string\n\n\u002F\u002F 提取数组元素类型\ntype ElementType\u003CT> = T extends (infer E)[] ? E : never;\ntype Elem = ElementType\u003Cstring[]>;  \u002F\u002F string\n\n\u002F\u002F 提取构造函数参数\ntype ConstructorParams\u003CT> = T extends new (...args: infer P) => any ? P : never;\n```\n\n## 映射类型\n\n```typescript\n\u002F\u002F 基本语法\ntype Readonly\u003CT> = { readonly [K in keyof T]: T[K] };\ntype Partial\u003CT> = { [K in keyof T]?: T[K] };\ntype Required\u003CT> = { [K in keyof T]-?: T[K] };  \u002F\u002F -? 去除可选\n\n\u002F\u002F Pick 的实现\ntype Pick\u003CT, K extends keyof T> = { [P in K]: T[P] };\ntype User = { name: string; age: number; email: string };\ntype UserPreview = Pick\u003CUser, 'name' | 'email'>;  \u002F\u002F { name: string; email: string }\n\n\u002F\u002F Omit 的实现\ntype Omit\u003CT, K extends keyof any> = Pick\u003CT, Exclude\u003Ckeyof T, K>>;\n\n\u002F\u002F 值转换\ntype Nullable\u003CT> = { [K in keyof T]: T[K] | null };\n\n\u002F\u002F 键重映射（as 子句，TS 4.1+）\ntype Getters\u003CT> = {\n  [K in keyof T as `get${Capitalize\u003Cstring & K>}`]: () => T[K]\n};\ntype UserGetters = Getters\u003CUser>;\n\u002F\u002F { getName: () => string; getAge: () => number; getEmail: () => string }\n```\n\n## 模板字面量类型\n\n```typescript\n\u002F\u002F 基本\ntype Greeting = `Hello, ${string}!`;\n\n\u002F\u002F 联合类型展开\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\ntype CSSMargin = `margin-${Direction}`;\n\u002F\u002F \"margin-top\" | \"margin-bottom\" | \"margin-left\" | \"margin-right\"\n\n\u002F\u002F 事件名生成\ntype EventName\u003CT extends string> = `on${Capitalize\u003CT>}`;\ntype ClickEvent = EventName\u003C'click'>;  \u002F\u002F 'onClick'\n\n\u002F\u002F 路由参数提取（递归条件类型）\ntype ExtractRouteParams\u003CT extends string> =\n  T extends `${string}:${infer Param}\u002F${infer Rest}`\n    ? Param | ExtractRouteParams\u003C`\u002F${Rest}`>\n    : T extends `${string}:${infer Param}`\n    ? Param\n    : never;\n\ntype Params = ExtractRouteParams\u003C'\u002Fusers\u002F:id\u002Fposts\u002F:postId'>;\n\u002F\u002F 'id' | 'postId'\n```\n\n## 泛型约束和默认值\n\n```typescript\n\u002F\u002F 约束\nfunction getProperty\u003CT, K extends keyof T>(obj: T, key: K): T[K] {\n  return obj[key];\n}\ngetProperty({ name: 'Alice', age: 30 }, 'name');  \u002F\u002F 返回 string\n\u002F\u002F getProperty({ name: 'Alice' }, 'foo');          \u002F\u002F 编译错误\n\n\u002F\u002F 默认值\ninterface ApiResponse\u003CT = unknown> {\n  data: T;\n  status: number;\n  message: string;\n}\ntype DefaultResponse = ApiResponse;       \u002F\u002F T = unknown\ntype UserResponse = ApiResponse\u003CUser>;    \u002F\u002F T = User\n```\n\n## const assertion\n\n```typescript\n\u002F\u002F 没有 as const：推断为宽泛类型\nconst config = { host: 'localhost', port: 3000, env: 'development' };\n\u002F\u002F config.env 的类型是 string\n\n\u002F\u002F 有 as const：字面量类型，readonly\nconst config = { host: 'localhost', port: 3000, env: 'development' } as const;\n\u002F\u002F config.env 的类型是 'development'（字面量类型）\n\n\u002F\u002F 数组 as const 变成只读元组\nconst routes = ['\u002Fhome', '\u002Fabout', '\u002Fcontact'] as const;\ntype Route = typeof routes[number];  \u002F\u002F '\u002Fhome' | '\u002Fabout' | '\u002Fcontact'\n```\n\n## satisfies 操作符（TS 4.9+）\n\n```typescript\ntype Theme = {\n  colors: Record\u003Cstring, string | [number, number, number]>;\n};\n\n\u002F\u002F satisfies：验证类型但保留具体推断\nconst theme = {\n  colors: {\n    primary: '#3B82F6',\n    secondary: [59, 130, 246],\n  }\n} satisfies Theme;\n\n\u002F\u002F 推断保留了具体类型\ntheme.colors.primary.toUpperCase();  \u002F\u002F 知道是 string\ntheme.colors.secondary[0];           \u002F\u002F 知道是 number\n```\n\n## 实用工具类型自己实现\n\n```typescript\n\u002F\u002F DeepPartial：深度可选\ntype DeepPartial\u003CT> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial\u003CT[K]> : T[K];\n};\n\n\u002F\u002F Flatten：展平嵌套数组类型\ntype Flatten\u003CT> = T extends Array\u003Cinfer U> ? Flatten\u003CU> : T;\ntype FlatType = Flatten\u003Cnumber[][][]>;  \u002F\u002F number\n\n\u002F\u002F UnionToIntersection：联合转交叉\ntype UnionToIntersection\u003CU> =\n  (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;\ntype Result = UnionToIntersection\u003C{ a: string } | { b: number }>;\n\u002F\u002F { a: string } & { b: number }\n\n\u002F\u002F Mutable：去除 readonly\ntype Mutable\u003CT> = { -readonly [K in keyof T]: T[K] };\n```\n\n## 类型安全的事件系统\n\n综合运用以上知识的实战例子：\n\n```typescript\n\u002F\u002F 定义事件映射\ninterface EventMap {\n  click: { x: number; y: number };\n  keydown: { key: string; code: string };\n  resize: { width: number; height: number };\n  message: { data: unknown; origin: string };\n}\n\ntype EventName = keyof EventMap;\n\nclass TypedEventEmitter {\n  private handlers: {\n    [K in EventName]?: Array\u003C(event: EventMap[K]) => void>;\n  } = {};\n\n  on\u003CK extends EventName>(\n    event: K,\n    handler: (event: EventMap[K]) => void\n  ): void {\n    if (!this.handlers[event]) {\n      (this.handlers[event] as any) = [];\n    }\n    (this.handlers[event] as any[]).push(handler);\n  }\n\n  emit\u003CK extends EventName>(event: K, data: EventMap[K]): void {\n    this.handlers[event]?.forEach(handler => handler(data));\n  }\n}\n\n\u002F\u002F 使用\nconst emitter = new TypedEventEmitter();\n\nemitter.on('click', (e) => {\n  console.log(e.x, e.y);  \u002F\u002F TypeScript 知道 e 是 { x: number; y: number }\n});\n\nemitter.emit('click', { x: 100, y: 200 });  \u002F\u002F 类型安全\n\u002F\u002F emitter.emit('click', { key: 'Enter' });  \u002F\u002F 编译错误\n```\n\n## 总结\n\nTypeScript 类型系统的威力在于：\n\n1. **条件类型**：根据输入类型做分支决策\n2. **infer**：从复杂类型中提取子类型\n3. **映射类型**：批量转换对象类型\n4. **模板字面量**：基于字符串生成类型\n\n真正的目标不是\"通过编译\"，而是让类型系统**在编码阶段就告诉你哪里会出错**。类型体操只是手段，类型安全才是目的。\n","\u003Ch1>TypeScript 高级模式：让类型系统为你工作\u003C\u002Fh1>\n\u003Cblockquote>\n\u003Cp>TypeScript 不是"带类型的 JavaScript"，类型系统本身是一门图灵完备的编程语言。掌握高级类型，能让很多运行时错误在编译时被捕获。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2 id=\"类型-vs-接口\">类型 vs 接口\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F interface：可以声明合并\ninterface User { name: string; }\ninterface User { age: number; }  \u002F\u002F 自动合并，不报错\n\u002F\u002F User 现在是 { name: string; age: number }\n\n\u002F\u002F type：不能声明合并，但更灵活\ntype StringOrNumber = string | number;\ntype Callback = (x: number) => void;\ntype Tuple = [string, number, boolean];\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>选择原则：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>对象形状的公共 API（库）：用 \u003Ccode>interface\u003C\u002Fcode>（允许用户扩展）\u003C\u002Fli>\n\u003Cli>联合类型、函数类型、复杂类型操作：用 \u003Ccode>type\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"联合类型-交叉类型\">联合类型 + 交叉类型\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 联合类型（OR）\ntype ID = string | number;\n\n\u002F\u002F 交叉类型（AND）：合并多个类型\ntype Admin = User & { permissions: string[] };\n\n\u002F\u002F Discriminated Union（判别联合）：最有用的模式\ntype Shape =\n  | { kind: 'circle'; radius: number }\n  | { kind: 'rect'; width: number; height: number }\n  | { kind: 'triangle'; base: number; height: number };\n\nfunction area(shape: Shape): number {\n  switch (shape.kind) {\n    case 'circle':\n      return Math.PI * shape.radius ** 2;\n    case 'rect':\n      return shape.width * shape.height;\n    case 'triangle':\n      return 0.5 * shape.base * shape.height;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"类型守卫\">类型守卫\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F is 守卫\nfunction isString(x: unknown): x is string {\n  return typeof x === 'string';\n}\n\n\u002F\u002F in 守卫\ninterface Cat { meow(): void }\ninterface Dog { bark(): void }\nfunction makeSound(animal: Cat | Dog) {\n  if ('meow' in animal) {\n    animal.meow();  \u002F\u002F TypeScript 知道是 Cat\n  } else {\n    animal.bark();\n  }\n}\n\n\u002F\u002F asserts 守卫\nfunction assertNonNull<T>(val: T | null | undefined): asserts val is T {\n  if (val == null) throw new Error('Expected non-null value');\n}\n\nconst user: User | null = getUser();\nassertNonNull(user);\nuser.name;  \u002F\u002F 确认非 null\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"条件类型\">条件类型\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 基本语法\ntype IsString<T> = T extends string ? 'yes' : 'no';\ntype A = IsString<string>;  \u002F\u002F 'yes'\ntype B = IsString<number>;  \u002F\u002F 'no'\n\n\u002F\u002F Distributive 特性（分配律）\n\u002F\u002F 当 T 是联合类型时，条件类型分别应用于每个成员\ntype ToArray<T> = T extends unknown ? T[] : never;\ntype C = ToArray<string | number>;  \u002F\u002F string[] | number[]\n\n\u002F\u002F 非分配版本（用元组包裹）\ntype ToArrayNonDist<T> = [T] extends [unknown] ? T[] : never;\ntype D = ToArrayNonDist<string | number>;  \u002F\u002F (string | number)[]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"infer-从类型中提取子类型\">infer：从类型中提取子类型\u003C\u002Fh2>\n\u003Cp>\u003Ccode>infer\u003C\u002Fcode> 是条件类型中声明临时类型变量的关键字。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F ReturnType 的实现\ntype ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;\ntype Fn = () => { name: string; age: number };\ntype Result = ReturnType<Fn>;  \u002F\u002F { name: string; age: number }\n\n\u002F\u002F Parameters 的实现\ntype Parameters<T> = T extends (...args: infer P) => any ? P : never;\ntype Params = Parameters<(x: number, y: string) => void>;  \u002F\u002F [number, string]\n\n\u002F\u002F Awaited 的实现\ntype Awaited<T> = T extends Promise<infer U> ? Awaited<U> : T;\ntype Unwrapped = Awaited<Promise<Promise<string>>>;  \u002F\u002F string\n\n\u002F\u002F 提取数组元素类型\ntype ElementType<T> = T extends (infer E)[] ? E : never;\ntype Elem = ElementType<string[]>;  \u002F\u002F string\n\n\u002F\u002F 提取构造函数参数\ntype ConstructorParams<T> = T extends new (...args: infer P) => any ? P : never;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"映射类型\">映射类型\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 基本语法\ntype Readonly<T> = { readonly [K in keyof T]: T[K] };\ntype Partial<T> = { [K in keyof T]?: T[K] };\ntype Required<T> = { [K in keyof T]-?: T[K] };  \u002F\u002F -? 去除可选\n\n\u002F\u002F Pick 的实现\ntype Pick<T, K extends keyof T> = { [P in K]: T[P] };\ntype User = { name: string; age: number; email: string };\ntype UserPreview = Pick<User, 'name' | 'email'>;  \u002F\u002F { name: string; email: string }\n\n\u002F\u002F Omit 的实现\ntype Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;\n\n\u002F\u002F 值转换\ntype Nullable<T> = { [K in keyof T]: T[K] | null };\n\n\u002F\u002F 键重映射（as 子句，TS 4.1+）\ntype Getters<T> = {\n  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]\n};\ntype UserGetters = Getters<User>;\n\u002F\u002F { getName: () => string; getAge: () => number; getEmail: () => string }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"模板字面量类型\">模板字面量类型\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 基本\ntype Greeting = `Hello, ${string}!`;\n\n\u002F\u002F 联合类型展开\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\ntype CSSMargin = `margin-${Direction}`;\n\u002F\u002F "margin-top" | "margin-bottom" | "margin-left" | "margin-right"\n\n\u002F\u002F 事件名生成\ntype EventName<T extends string> = `on${Capitalize<T>}`;\ntype ClickEvent = EventName<'click'>;  \u002F\u002F 'onClick'\n\n\u002F\u002F 路由参数提取（递归条件类型）\ntype ExtractRouteParams<T extends string> =\n  T extends `${string}:${infer Param}\u002F${infer Rest}`\n    ? Param | ExtractRouteParams<`\u002F${Rest}`>\n    : T extends `${string}:${infer Param}`\n    ? Param\n    : never;\n\ntype Params = ExtractRouteParams<'\u002Fusers\u002F:id\u002Fposts\u002F:postId'>;\n\u002F\u002F 'id' | 'postId'\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"泛型约束和默认值\">泛型约束和默认值\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 约束\nfunction getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {\n  return obj[key];\n}\ngetProperty({ name: 'Alice', age: 30 }, 'name');  \u002F\u002F 返回 string\n\u002F\u002F getProperty({ name: 'Alice' }, 'foo');          \u002F\u002F 编译错误\n\n\u002F\u002F 默认值\ninterface ApiResponse<T = unknown> {\n  data: T;\n  status: number;\n  message: string;\n}\ntype DefaultResponse = ApiResponse;       \u002F\u002F T = unknown\ntype UserResponse = ApiResponse<User>;    \u002F\u002F T = User\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"const-assertion\">const assertion\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 没有 as const：推断为宽泛类型\nconst config = { host: 'localhost', port: 3000, env: 'development' };\n\u002F\u002F config.env 的类型是 string\n\n\u002F\u002F 有 as const：字面量类型，readonly\nconst config = { host: 'localhost', port: 3000, env: 'development' } as const;\n\u002F\u002F config.env 的类型是 'development'（字面量类型）\n\n\u002F\u002F 数组 as const 变成只读元组\nconst routes = ['\u002Fhome', '\u002Fabout', '\u002Fcontact'] as const;\ntype Route = typeof routes[number];  \u002F\u002F '\u002Fhome' | '\u002Fabout' | '\u002Fcontact'\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"satisfies-操作符-ts-4-9\">satisfies 操作符（TS 4.9+）\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">type Theme = {\n  colors: Record<string, string | [number, number, number]>;\n};\n\n\u002F\u002F satisfies：验证类型但保留具体推断\nconst theme = {\n  colors: {\n    primary: '#3B82F6',\n    secondary: [59, 130, 246],\n  }\n} satisfies Theme;\n\n\u002F\u002F 推断保留了具体类型\ntheme.colors.primary.toUpperCase();  \u002F\u002F 知道是 string\ntheme.colors.secondary[0];           \u002F\u002F 知道是 number\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"实用工具类型自己实现\">实用工具类型自己实现\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F DeepPartial：深度可选\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\n\u002F\u002F Flatten：展平嵌套数组类型\ntype Flatten<T> = T extends Array<infer U> ? Flatten<U> : T;\ntype FlatType = Flatten<number[][][]>;  \u002F\u002F number\n\n\u002F\u002F UnionToIntersection：联合转交叉\ntype UnionToIntersection<U> =\n  (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;\ntype Result = UnionToIntersection<{ a: string } | { b: number }>;\n\u002F\u002F { a: string } & { b: number }\n\n\u002F\u002F Mutable：去除 readonly\ntype Mutable<T> = { -readonly [K in keyof T]: T[K] };\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"类型安全的事件系统\">类型安全的事件系统\u003C\u002Fh2>\n\u003Cp>综合运用以上知识的实战例子：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 定义事件映射\ninterface EventMap {\n  click: { x: number; y: number };\n  keydown: { key: string; code: string };\n  resize: { width: number; height: number };\n  message: { data: unknown; origin: string };\n}\n\ntype EventName = keyof EventMap;\n\nclass TypedEventEmitter {\n  private handlers: {\n    [K in EventName]?: Array<(event: EventMap[K]) => void>;\n  } = {};\n\n  on<K extends EventName>(\n    event: K,\n    handler: (event: EventMap[K]) => void\n  ): void {\n    if (!this.handlers[event]) {\n      (this.handlers[event] as any) = [];\n    }\n    (this.handlers[event] as any[]).push(handler);\n  }\n\n  emit<K extends EventName>(event: K, data: EventMap[K]): void {\n    this.handlers[event]?.forEach(handler => handler(data));\n  }\n}\n\n\u002F\u002F 使用\nconst emitter = new TypedEventEmitter();\n\nemitter.on('click', (e) => {\n  console.log(e.x, e.y);  \u002F\u002F TypeScript 知道 e 是 { x: number; y: number }\n});\n\nemitter.emit('click', { x: 100, y: 200 });  \u002F\u002F 类型安全\n\u002F\u002F emitter.emit('click', { key: 'Enter' });  \u002F\u002F 编译错误\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"总结\">总结\u003C\u002Fh2>\n\u003Cp>TypeScript 类型系统的威力在于：\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>条件类型\u003C\u002Fstrong>：根据输入类型做分支决策\u003C\u002Fli>\n\u003Cli>\u003Cstrong>infer\u003C\u002Fstrong>：从复杂类型中提取子类型\u003C\u002Fli>\n\u003Cli>\u003Cstrong>映射类型\u003C\u002Fstrong>：批量转换对象类型\u003C\u002Fli>\n\u003Cli>\u003Cstrong>模板字面量\u003C\u002Fstrong>：基于字符串生成类型\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>真正的目标不是"通过编译"，而是让类型系统\u003Cstrong>在编码阶段就告诉你哪里会出错\u003C\u002Fstrong>。类型体操只是手段，类型安全才是目的。\u003C\u002Fp>\n","2026-05-03",[11,12,13,14],"typescript","类型系统","前端工程","高级模式",false,[17,30,41,53,62,69,76,83,90,97,100,109,119,128,136,144,153,162,171,181,188,198,204,211,217,226,233,240,248,258,267,276,286,296,306,314,324,335,345,354,362,368,376,384,392,400,408,415],{"slug":18,"title":19,"description":20,"pub_date":21,"tags":22,"draft":15,"word_count":29},"ide-skills-guide","Agent Skills 完全指南：21 款第三方 Skill 深度评测与使用心得","全面评测 21 款第三方 Agent Skills，涵盖 Vue 生态、前端设计、构建工具、实用工具四大分类。从安装配置到实际使用场景，带你了解每个 Skill 的功能特点、最佳实践与使用心得。","2026-06-15",[23,24,25,26,27,28],"agent","skills","AI","效率工具","前端","Vue",4169,{"slug":31,"title":32,"description":33,"pub_date":34,"tags":35,"draft":15,"word_count":40},"linux-kernel-skeleton-struct-funcptr-container_of","Linux 内核骨架：struct、函数指针与 container_of","读懂 Linux 内核源码的三件套：巨大的 struct 组合代替继承、函数指针表实现虚派发、container_of 宏从嵌入成员找回完整对象。","2026-05-09",[36,37,38,39],"linux","kernel","C","container_of",1369,{"slug":42,"title":43,"description":44,"pub_date":45,"tags":46,"draft":15,"word_count":52},"astro-complete-guide-2025","Astro 5 深度剖析：Islands 架构原理、构建优化与 Cloudflare Workers 边缘部署","从编译器视角解析 Astro 5 的 Islands 架构实现原理，Content Layer API 的 Vite 插件机制，Server Islands 的流式渲染，以及如何在 Cloudflare Workers + D1 边缘环境下榨干性能。","2026-05-08",[47,48,49,50,51],"astro","frontend","cloudflare","performance","architecture",3663,{"slug":54,"title":55,"description":56,"pub_date":9,"tags":57,"draft":15,"word_count":61},"llm-prompt-engineering","Prompt Engineering 实战：让 LLM 真正听话的技巧","System prompt 怎么写、Few-shot 怎么设计、Chain-of-Thought 原理，以及常见失败模式和调试方法。",[58,59,60],"ai","llm","工程实践",1723,{"slug":63,"title":64,"description":65,"pub_date":9,"tags":66,"draft":15,"word_count":68},"rag-system-design","RAG 系统设计：从 naive 到 production-ready","Retrieval-Augmented Generation 不只是「向量数据库 + LLM」，分块策略、召回质量、重排序、缓存才是工程核心。",[58,67,59,60],"rag",1613,{"slug":70,"title":71,"description":72,"pub_date":9,"tags":73,"draft":15,"word_count":75},"git-advanced-workflow","Git 进阶工作流：rebase、cherry-pick、bisect 的正确使用","merge 会了，但 rebase 总搞错？bisect 找 bug 提交？interactive rebase 整理历史？这篇一次说清楚。",[74,60],"git",1396,{"slug":77,"title":78,"description":79,"pub_date":9,"tags":80,"draft":15,"word_count":82},"docker-practical-guide","Docker 实战：从会用到用好","会 docker run 不够，Dockerfile 最佳实践、多阶段构建、Compose 编排、镜像瘦身才是日常真正需要的。",[81,36,60],"docker",1268,{"slug":84,"title":85,"description":86,"pub_date":9,"tags":87,"draft":15,"word_count":89},"anthropics-skills-guide","anthropics\u002Fskills：Anthropic 官方 Agent Skills 仓库解析","Anthropic 官方开源的 Agent Skills 标准仓库，127k stars，解析 SKILL.md 规范、17 个示例 skill 的设计模式，以及如何在 Claude Code \u002F Claude.ai \u002F API 中使用",[58,88,23,24],"Claude",2090,{"slug":91,"title":92,"description":93,"pub_date":9,"tags":94,"draft":15,"word_count":96},"karpathy-claude-code-guidelines","Karpathy 的 LLM 编码批评与 CLAUDE.md 最佳实践","基于 Andrej Karpathy 对 LLM 编程助手的观察，forrestchang 提炼出一个 CLAUDE.md 文件，4 条原则解决 AI 编码的典型失控问题：乱猜假设、过度设计、乱改代码、目标不清",[58,88,95,60],"Claude Code",2699,{"slug":4,"title":5,"description":6,"pub_date":9,"tags":98,"draft":15,"word_count":99},[11,12,13,14],1419,{"slug":101,"title":102,"description":103,"pub_date":9,"tags":104,"draft":15,"word_count":108},"linux-performance-tuning","Linux 性能调优实战：从 top 到 perf 的完整工具链","遇到性能问题不知道从哪下手？这篇建立系统化的排查思路，从 CPU\u002F内存\u002FIO\u002F网络逐层分析。",[36,105,106,107],"性能","运维","系统编程",1524,{"slug":110,"title":111,"description":112,"pub_date":9,"tags":113,"draft":15,"word_count":118},"python-functional-programming","Python 函数式编程：map\u002Ffilter\u002Freduce 之外","Python 不是纯函数式语言，但 functools、itertools、偏函数、闭包这些工具用好了能让代码简洁一个量级。",[114,115,116,117],"python","函数式","闭包","装饰器",1867,{"slug":120,"title":121,"description":122,"pub_date":9,"tags":123,"draft":15,"word_count":127},"python-oop-guide","Python 面向对象：__init__ 之外你需要知道的","Python OOP 不只是 class + __init__，魔术方法、描述符、元类才是真正的武器。",[114,124,125,126],"OOP","面向对象","魔术方法",1792,{"slug":129,"title":130,"description":131,"pub_date":9,"tags":132,"draft":15,"word_count":135},"python-data-structures","Python 内置数据结构深度解析","list、dict、set、tuple 不只是数据容器，搞懂它们的底层实现和时间复杂度，才能写出高性能 Python。",[114,133,105,134],"数据结构","算法",1517,{"slug":137,"title":138,"description":139,"pub_date":9,"tags":140,"draft":15,"word_count":143},"python-basics-quick-start","Python 快速上手：写给有编程基础的人","已经会其他语言，想快速掌握 Python 的语法特性和思维方式，这篇是捷径。",[114,141,142],"入门","基础",1607,{"slug":145,"title":146,"description":147,"pub_date":9,"tags":148,"draft":15,"word_count":152},"python-dataclass-pydantic","Python dataclass vs Pydantic：数据类选型指南","dataclass 是标准库的轻量选择，Pydantic v2 是带验证的重武器，什么时候用哪个，这篇说清楚。",[114,149,150,151],"dataclass","pydantic","数据验证",1323,{"slug":154,"title":155,"description":156,"pub_date":9,"tags":157,"draft":15,"word_count":161},"python-asyncio-practical","Python asyncio 实战：从回调地狱到协程优雅","asyncio 是 Python 异步编程的核心，搞懂 event loop、Task、gather 这些概念才能写出真正高效的异步代码。",[114,158,159,160],"asyncio","并发","网络编程",1258,{"slug":163,"title":164,"description":165,"pub_date":9,"tags":166,"draft":15,"word_count":170},"python-type-hints-guide","Python 类型注解完全指南：从入门到实践","Python 3.5+ 引入类型注解，配合 mypy\u002Fpyright 让 Python 也能享受静态类型检查的好处。",[114,167,168,169],"typescript-style","type-hints","工具链",1102,{"slug":172,"title":173,"description":174,"pub_date":175,"tags":176,"draft":15,"word_count":180},"pwa-install-update-button","PWA 踩坑：为什么安装按钮从来不出现","从 beforeinstallprompt 到 Service Worker waiting，把 PWA 的安装与更新提示真正做对","2026-05-02",[177,178,179],"pwa","javascript","web",1683,{"slug":182,"title":183,"description":184,"pub_date":185,"tags":186,"draft":15,"word_count":187},"openclaw-vs-hermes-agent","OpenClaw vs Hermes Agent：两个本地优先 Agent 的设计差异","OpenClaw（Novita AI）和 Hermes Agent（Nous Research）都是本地运行的个人 AI Agent，但在记忆系统、技能学习、运行环境和模型生态上走了不同的路。深入对比两种架构的核心差异。","2026-05-01",[58,23,59],1679,{"slug":189,"title":190,"description":191,"pub_date":185,"tags":192,"draft":15,"word_count":197},"cpp-random-design-patterns","C++ 设计模式实战：RAII、观察者、工厂","用现代 C++（C++17\u002F20）实现三种高频设计模式：RAII 资源管理、观察者模式事件系统、工厂模式插件架构。每种模式给出问题场景、实现代码和真实工程案例。",[193,194,195,196],"cpp","设计模式","c++17","工程",2613,{"slug":199,"title":200,"description":201,"pub_date":185,"tags":202,"draft":15,"word_count":203},"data-structures-fundamentals","数据结构基础：从数组到红黑树","系统梳理常用数据结构的核心原理、时间复杂度和适用场景。数组、链表、栈、队列、哈希表、二叉树、堆、图，每种结构附实现要点和 C++ 代码片段。",[133,134,193,142],3004,{"slug":205,"title":206,"description":207,"pub_date":208,"tags":209,"draft":15,"word_count":210},"ai-agent-what-is","什么是 AI Agent？从 LLM 到自主执行","LLM 本身是无状态问答机，Agent 是什么让它’动’起来的？本文深入解析 Agent 的四个核心能力、ReAct 框架、工具调用原理，以及主流框架横向对比。","2026-04-30",[58,23,59],2116,{"slug":212,"title":213,"description":214,"pub_date":208,"tags":215,"draft":15,"word_count":216},"ai-agent-memory","AI Agent 的记忆系统：从上下文窗口到长期记忆","深入拆解 AI Agent 的四种记忆类型、上下文窗口压缩策略、RAG 向量检索原理，以及三种典型失败模式和工程选型建议。",[58,23,67],2052,{"slug":218,"title":219,"description":220,"pub_date":208,"tags":221,"draft":15,"word_count":225},"network-proxy-vpn-guide","代理与翻墙技术原理：从 HTTP 代理到现代协议","深入解析代理与 VPN 的本质区别，梳理从 SOCKS5 到 Shadowsocks、V2Ray\u002FXray、Hysteria2 的协议演进，以及机场订阅的技术本质。",[222,223,224],"网络","代理","协议",2148,{"slug":227,"title":228,"description":229,"pub_date":208,"tags":230,"draft":15,"word_count":143},"algorithm-binary-search","二分查找：永远写不对？记住这个模板","彻底搞清楚二分查找的边界问题：闭区间和左闭右开两套模板、三道经典 LeetCode 题目完整 C++ 实现，以及二分答案的进阶思路。",[134,231,232,193],"二分查找","leetcode",{"slug":234,"title":235,"description":236,"pub_date":208,"tags":237,"draft":15,"word_count":239},"algorithm-sliding-window","滑动窗口算法：从暴力到 O(n) 的思维跃迁","系统讲解滑动窗口算法的核心模板、适用题型，配合三道经典 LeetCode 题目的完整 C++ 实现，彻底理解双指针收缩思路。",[134,238,232,193],"滑动窗口",1943,{"slug":241,"title":242,"description":243,"pub_date":208,"tags":244,"draft":15,"word_count":247},"network-clash-config","Clash \u002F Mihomo 配置详解：规则、策略组与分流","深入解析 Clash\u002FMihomo 的核心配置结构，包括代理节点、策略组类型、规则优先级、DNS fake-ip 模式，以及一份实用的完整配置模板。",[222,245,223,246],"clash","配置",1292,{"slug":249,"title":250,"description":251,"pub_date":252,"tags":253,"draft":15,"word_count":257},"hid-hotplug","HID 设备热插拔检测：从 udev 到 node-hid","在 Linux 上用 node-hid + usb 库实现可靠的 USB HID 设备热插拔检测，踩坑记录","2026-04-28",[193,254,36,255,256],"hid","nodejs","electron",2039,{"slug":259,"title":260,"description":261,"pub_date":262,"tags":263,"draft":15,"word_count":266},"electron-ipc-types","Electron IPC 类型安全：从 any 到完全类型化","用 TypeScript 泛型封装 Electron IPC，彻底消灭 any，preload 契约集中管理","2026-04-25",[256,11,264,265],"ipc","vue",1446,{"slug":268,"title":269,"description":270,"pub_date":271,"tags":272,"draft":15,"word_count":275},"element-plus-popover-hide","手动关闭多个 el-popover（不用 v-model:visible）","通过 ref + Reflect.get 调用 hide() 方法手动关闭 Element Plus Popover，解释 Vue3 Proxy 导致无法直接调用实例方法的原因。","2024-10-25",[265,273,274],"element-plus","vue3",1321,{"slug":277,"title":278,"description":279,"pub_date":280,"tags":281,"draft":15,"word_count":285},"vite-vue3-ts-elementplus-pinia","用 Vite+（vp）从零搭建 Vue3 + TypeScript + Element Plus + Pinia + Vue Router","使用 Vite+ 统一工具链（vp）一条命令搭建 Vue3 全家桶，涵盖按需导入、Pinia store、路由配置，以及常见坑的解决方案。","2024-08-27",[265,282,11,273,283,284],"vite","pinia","vite-plus",1960,{"slug":287,"title":288,"description":289,"pub_date":290,"tags":291,"draft":15,"word_count":295},"cef-lnk2038-iterator-debug-level","CEF LNK2038：解决 _ITERATOR_DEBUG_LEVEL 不匹配错误","分析 CEF（Chromium Embedded Framework）集成时出现的 LNK2038 _ITERATOR_DEBUG_LEVEL 链接错误，从根本原因到解决方案的完整指南。","2024-05-07",[193,292,293,294],"CEF","Visual Studio","链接错误",1509,{"slug":297,"title":298,"description":299,"pub_date":300,"tags":301,"draft":15,"word_count":305},"npm-electron-install-fix","彻底解决 npm 安装 Electron 失败的问题","分析 npm install electron 失败的根本原因（下载二进制超时\u002F被墙），通过国内镜像（npmmirror）彻底解决，并介绍多种备选方案和常见错误排查。","2024-03-01",[256,302,303,304],"npm","前端工具链","国内镜像",1494,{"slug":307,"title":308,"description":309,"pub_date":310,"tags":311,"draft":15,"word_count":313},"git-out-of-memory","解决 git 报错：Fatal: Out of memory, malloc failed","分析 git 大仓库操作时出现 Out of memory malloc failed 的根本原因，通过调整 pack.windowMemory、http.postBuffer 和 git repack 彻底解决。","2024-01-31",[74,36,312],"工具",2244,{"slug":315,"title":316,"description":317,"pub_date":318,"tags":319,"draft":15,"word_count":323},"vmware-tools-install","在 VMware 虚拟机中安装 open-vm-tools 完整指南","详解 VMware Tools 的作用、open-vm-tools 与官方 VMware Tools 的区别，以及在 Ubuntu 虚拟机中安装并生效的完整步骤和常见问题排查。","2023-11-21",[320,36,321,322],"VMware","Ubuntu","虚拟机",2523,{"slug":325,"title":326,"description":327,"pub_date":328,"tags":329,"draft":15,"word_count":334},"load-balancing-algorithms","负载均衡算法完全指南：从轮询到一致性哈希","系统梳理静态与动态负载均衡算法，涵盖轮询、随机、权重、IP Hash、一致性 Hash、最少连接、最快响应等，并对比 Nginx、Dubbo、Spring Cloud LoadBalancer 的实现差异。","2023-11-15",[330,331,332,333],"分布式","负载均衡","Nginx","微服务",1764,{"slug":336,"title":337,"description":338,"pub_date":339,"tags":340,"draft":15,"word_count":344},"win-cw2a-ca2w","ATL 字符串转换：CW2A 与 CA2W 完全指南","详解 ATL 宏 CW2A\u002FCA2W 在 Unicode 与 ANSI 之间的字符串转换用法、头文件依赖、USES_CONVERSION 宏的作用与常见陷阱。","2023-06-09",[193,341,342,343],"windows","ATL","字符串",1665,{"slug":346,"title":347,"description":348,"pub_date":339,"tags":349,"draft":15,"word_count":353},"csharp-sendmessage-cpp","C# 通过 SendMessage 向 C++ 窗口发送消息与字符串","使用 P\u002FInvoke 调用 user32.dll 的 SendMessage，从 C# 发送自定义 WM_USER 消息及字符串指针给 C++ 原生窗口，并在 C++ 侧正确接收和转换。",[350,193,341,351,352],"C#","互操作","PInvoke",1554,{"slug":355,"title":356,"description":357,"pub_date":358,"tags":359,"draft":15,"word_count":361},"win-postmessage-vector","Windows PostMessage 跨线程传递 std::vector 指针","通过 PostMessage 在 Windows 消息队列中传递 std::vector 指针，使用 reinterpret_cast 将指针装入 LPARAM，并在接收方正确释放内存。","2023-05-26",[193,341,360],"WinAPI",1823,{"slug":363,"title":364,"description":365,"pub_date":358,"tags":366,"draft":15,"word_count":367},"exe-dll-single-package","将 EXE 和 DLL 打包成单一可执行文件","介绍两种将 exe 和依赖 dll 打包成单文件的方案：Enigma Virtual Box 和 WinRAR 自解压，适合发布 Windows 桌面程序时简化分发流程。",[341,193,312],1619,{"slug":369,"title":370,"description":371,"pub_date":358,"tags":372,"draft":15,"word_count":375},"cpp-random-mt19937","C++ 现代随机数生成：用 mt19937 彻底告别 rand()","深入讲解为什么 rand() 不够用，以及如何用 C++11 的 \u003Crandom> 库正确生成高质量随机数，涵盖 mt19937、各种分布和线程安全。",[193,373,374],"c++11","random",1549,{"slug":377,"title":378,"description":379,"pub_date":380,"tags":381,"draft":15,"word_count":383},"win-startup-registry","C++ 实现程序开机自启动：注册表方式详解","通过操作 Windows 注册表 Run 键实现程序开机自启动，包括 HKCU 与 HKLM 区别、完整封装代码、工作目录问题和 UAC 权限处理。","2022-12-26",[341,193,382],"registry",1201,{"slug":385,"title":386,"description":387,"pub_date":388,"tags":389,"draft":15,"word_count":391},"mfc-cstring-wparam","MFC 中 CString 与 WPARAM 之间的转换","详解 MFC 消息传递中 CString 无法直接强转为 WPARAM 的原因，以及两种正确的转换方案，并介绍结构体指针传递的正确姿势。","2022-11-25",[390,193,341],"mfc",1546,{"slug":393,"title":394,"description":395,"pub_date":396,"tags":397,"draft":15,"word_count":399},"duilib-static-build","正确编译 Duilib 静态库：避免 ATL 依赖和链接错误","详解如何用 DuiLib_Static.vcxproj 编译 Duilib 静态库，解决 VARIANT 未定义、Unicode 配置不匹配和 ATL 依赖等常见问题。","2022-08-24",[193,398,341,390],"duilib",2639,{"slug":401,"title":402,"description":403,"pub_date":404,"tags":405,"draft":15,"word_count":407},"mfc-dpi-adaptive","MFC 界面自适应不同分辨率","MFC 对话框程序实现控件和字体随分辨率自动缩放的完整方案，附 DPI Awareness 配置说明","2022-08-17",[390,193,341,406],"dpi",1414,{"slug":409,"title":410,"description":411,"pub_date":412,"tags":413,"draft":15,"word_count":414},"mfc-drag-window","MFC 无标题栏窗口客户区拖动：三种方法对比","MFC 对话框去掉标题栏后如何实现拖动移动窗口，三种方案完整实现与适用场景分析","2022-08-16",[390,193,341],1633,{"slug":416,"title":417,"description":418,"pub_date":419,"tags":420,"draft":15,"word_count":422},"algorithm-number-complement","整数的补数：位运算掩码解法","LeetCode 476 题，用掩码 XOR 实现整数补数，附 C++\u002FPython\u002FJava 三种实现及补数与补码的区别","2021-03-08",[134,421,232],"位运算",1374,[]]