上篇我们完成了 TypeScript 基础类型注解、接口、泛型、基本工具类型。但“会用”和“精通”之间横亘着类型编程的深水区。这篇将深入生产级 TypeScript 的核心实战——没有基础语法不注水全是硬核干货。一、类型守卫与自定义守卫让类型系统真正“懂你”1.1 内置类型守卫TypeScript 内置了四种类型守卫typeof区分string、number、boolean、symbol、bigint、function、objectinstanceof区分 ES class 实例in检查对象上是否存在某个属性可辨识联合 (Discriminated Union)利用共同的type字段1.2 自定义类型守卫is关键字写一个真正能收窄类型的函数typescriptinterface Cat { meow: () void; name: string; } interface Dog { bark: () void; age: number; } // 自定义守卫返回类型是 pet is Cat function isCat(pet: Cat | Dog): pet is Cat { return (pet as Cat).meow ! undefined; } // 使用 function play(pet: Cat | Dog) { if (isCat(pet)) { pet.meow(); // ✅ pet 被收窄为 Cat console.log(pet.name); } else { pet.bark(); // ✅ pet 被收窄为 Dog console.log(pet.age); } }与普通boolean的区别pet is Cat告诉 TypeScript 编译器“当函数返回 true 时传入的参数就是 Cat 类型”从而在if分支内自动收窄类型。1.3 守卫的高级模式asserts断言用于断言某个条件成立否则抛出错误。之后变量类型会被收窄typescriptfunction assertIsString(value: unknown): asserts value is string { if (typeof value ! string) { throw new Error(Not a string); } } let input: unknown hello; assertIsString(input); input.toUpperCase(); // ✅ 此时 input 被收窄为 string二、高级类型编程类型体操的核心心法2.1 条件类型Conditional TypesT extends U ? X : Y—— 根据类型关系动态选择类型。typescripttype IsArrayT T extends any[] ? true : false; type A IsArraystring[]; // true type B IsArraynumber; // false // 结合 infer类型推断 type ReturnTypeT T extends (...args: any[]) infer R ? R : never; type Fn (x: number) string; type R ReturnTypeFn; // string2.2 映射类型Mapped Types遍历联合类型生成新类型typescripttype ReadonlyT { readonly [P in keyof T]: T[P]; }; type PartialT { [P in keyof T]?: T[P]; }; // 更高级的添加或删除修饰符 type MutableT { -readonly [P in keyof T]: T[P]; // 移除 readonly }; type RequiredT { [P in keyof T]-?: T[P]; // 移除可选 ? };2.3 模板字面量类型Template Literal TypesTypeScript 4.1 提供的字符串类型编程能力typescripttype EventName on${Capitalizestring}; type ClickEvent EventName; // on${Capitalizestring}实际使用时需配合泛型 // 实际例子路由参数解析 type RouteParamsT extends string T extends ${infer _Start}:${infer Param}/${infer Rest} ? Param | RouteParamsRest : T extends ${infer _Start}:${infer Param} ? Param : never; type Params RouteParams/user/:id/post/:pid; // id | pid2.4 递归类型Recursive Types构建树形结构或深度操作typescripttype JsonValue | string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }; // 深度只读 type DeepReadonlyT { readonly [P in keyof T]: T[P] extends object ? DeepReadonlyT[P] : T[P]; };三、生产级工具类型精讲除了内置的Partial、Required、Pick、Omit、Record、Exclude、Extract、NonNullable、ReturnType、Parameters外这些也是必备的3.1AwaitedTTypeScript 4.5解开 Promise 的嵌套typescripttype Result AwaitedPromisePromisenumber; // number3.2NoInferTTypeScript 5.4阻止泛型推断从使用侧反向传播用于函数参数中强制指定泛型typescriptdeclare function createT(value: T, defaultValue: NoInferT): T; // 调用时 defaultValue 的类型必须精确匹配 T不会被推断扩展3.3 自定义高频工具类型DeepPartialT—— 递归可选typescripttype DeepPartialT T extends object ? { [P in keyof T]?: DeepPartialT[P] } : T;ValueOfT—— 获取对象所有值的联合类型typescripttype ValueOfT T[keyof T];OmitNeverT—— 过滤掉值为never的字段typescripttype OmitNeverT { [K in keyof T as T[K] extends never ? never : K]: T[K] };UnionToIntersectionU—— 联合类型转交叉类型高级技巧typescripttype UnionToIntersectionU (U extends any ? (k: U) void : never) extends (k: infer I) void ? I : never; // 例子: UnionToIntersection{ a: 1 } | { b: 2 } { a: 1 } { b: 2 }四、TSConfig 生产级配置4.1 核心编译选项tsconfig.json生产项目建议开启以下严格模式全家桶json{ compilerOptions: { // 严格模式建议全部 true strict: true, // 总开关开启下面所有 noImplicitAny: true, // 禁止隐式 any strictNullChecks: true, // null/undefined 严格检查 strictFunctionTypes: true, // 函数类型双向协变检查 strictBindCallApply: true, // bind/call/apply 严格检查 strictPropertyInitialization: true,// 类属性必须初始化 noImplicitThis: true, // this 隐式 any 报错 alwaysStrict: true, // 每个文件生成 use strict // 额外安全选项 noUnusedLocals: true, // 禁止未使用的局部变量 noUnusedParameters: true, // 禁止未使用的参数 noImplicitReturns: true, // 函数所有分支必须显式返回 noFallthroughCasesInSwitch: true, // switch 禁止落空 // 模块与输出 module: NodeNext, // 或 ESNext 取决于目标环境 moduleResolution: NodeNext, target: ES2022, // 现代 Node.js 可用 ES2022 lib: [ES2022], outDir: ./dist, rootDir: ./src, removeComments: true, // 生产去除注释 sourceMap: false, // 生产一般不需要 source map调试用可保留 declaration: true, // 生成 .d.ts库项目 declarationMap: false, // 库项目可开启 // 其他 esModuleInterop: true, skipLibCheck: true, // 提升编译速度生产不建议 false forceConsistentCasingInFileNames: true }, include: [src/**/*], exclude: [node_modules, dist, **/*.test.ts] }4.2tsc --noEmit与tsc --build--noEmit只做类型检查不输出 JS。CI 中用于验证类型正确性--build项目引用增量编译大型 monorepo 必备4.3 项目引用Project References拆分大型项目为多个子项目加速编译json// tsconfig.base.json { compilerOptions: { composite: true, declaration: true } } // packages/core/tsconfig.json { extends: ../../tsconfig.base.json, compilerOptions: { outDir: ./dist }, references: [] // 无依赖 } // packages/app/tsconfig.json { extends: ../../tsconfig.base.json, references: [{ path: ../core }] }构建命令tsc --build packages/core packages/app。五、类型性能优化大型项目编译慢往往是因为复杂类型导致 TS 服务器负担过重。5.1 避免过度条件类型typescript// ❌ 差深度嵌套条件类型 type DeepTypeT T extends string ? T extends ${infer A}.${infer B} ? A extends a ? ... : ... : ... : ...; // ✅ 好拆分为多个辅助类型 使用映射类型代替条件递归5.2 使用type代替interface的时机interface适合声明对象形状、类、可合并扩展type适合联合、交叉、映射、条件类型优先使用interface直到需要type的特性5.3 减少递归深度默认递归深度限制为 1000深度递归类型会导致编译失败或极慢。可用尾递归优化模式但 TS 不支持真正的尾递归消除需手动展平。5.4 避免any泄漏any会关闭类型检查并传播。使用unknown 类型守卫代替。5.5 性能度量bash# 生成性能追踪 tsc --generateTrace trace # 上传到 https://www.typescriptlang.org/play?#code/ 分析热路径六、装饰器现代 TypeScriptTypeScript 5.0 支持Stage 3 装饰器标准与之前实验性装饰器不兼容。6.1 标准装饰器基本用法typescriptfunction loggedThis, Args extends any[], Return( target: (this: This, ...args: Args) Return, context: ClassMethodDecoratorContextThis, (this: This, ...args: Args) Return ) { return function(this: This, ...args: Args): Return { console.log(Calling ${String(context.name)} with, args); return target.call(this, ...args); }; } class Example { logged greet(name: string) { return Hello, ${name}; } }6.2 生产级装饰器场景依赖注入、日志、性能监控typescript// 简单的性能计时装饰器 function timeThis, Args extends any[], Return( fn: (this: This, ...args: Args) Return, ctx: ClassMethodDecoratorContext ) { return function(this: This, ...args: Args): Return { const start performance.now(); const result fn.call(this, ...args); const end performance.now(); console.log(${String(ctx.name)} took ${end - start}ms); return result; }; }注意标准装饰器不能改变方法签名不能直接修改类结构除非返回一个新的类。七、与 React/Vue 生产级整合要点7.1 React TypeScript 最佳实践tsx// 组件 props 类型定义 interface ButtonProps { children: React.ReactNode; onClick?: () void; variant?: primary | secondary; } // 使用 FC 或显式声明 const Button ({ children, onClick, variant primary }: ButtonProps) { return button onClick{onClick} className{variant}{children}/button; }; // 事件处理类型 const handleChange (e: React.ChangeEventHTMLInputElement) { console.log(e.target.value); }; // useRef 用于 DOM const inputRef useRefHTMLInputElement(null);7.2 Vue 3 TypeScriptvuescript setup langts interface Props { title: string; count?: number; } const props withDefaults(definePropsProps(), { count: 0 }); const emit defineEmits{ (e: update, value: number): void; (e: close): void; }(); /script八、TypeScript 编译流程与生态系统工具8.1ts-nodevstsxvstsimp工具特点适用场景ts-node老牌支持swc加速开发脚本tsx(基于 esbuild)极快开箱即用开发、工具链tsimp(基于 swc)快速TypeScript 官方推荐实验性ESM 项目生产环境永远先编译再运行tsc→node dist/index.js。8.2 类型定义发布库项目必须生成.d.tsjson// package.json { types: ./dist/index.d.ts, exports: { .: { import: ./dist/index.js, types: ./dist/index.d.ts } } }8.3 Monorepo 工具链pnpm workspace tsc --build轻量Nx企业级Turborepo与 tsc 配合良好九、实战实现一个类型安全的 Event Bustypescripttype EventMap { user-login: { userId: string; timestamp: number }; user-logout: { userId: string }; data-update: { id: number; payload: unknown }; }; class TypedEventEmitterT extends Recordstring, any { private listeners new Mapkeyof T, Set(data: any) void(); onK extends keyof T(event: K, handler: (data: T[K]) void): void { if (!this.listeners.has(event)) { this.listeners.set(event, new Set()); } this.listeners.get(event)!.add(handler); } emitK extends keyof T(event: K, data: T[K]): void { const handlers this.listeners.get(event); if (handlers) { handlers.forEach(handler handler(data)); } } } const emitter new TypedEventEmitterEventMap(); emitter.on(user-login, (data) { console.log(data.userId, data.timestamp); // ✅ 类型安全 }); emitter.emit(user-login, { userId: 123, timestamp: Date.now() });十、总结生产级 TypeScript 检查清单类别检查项验收动作类型安全开启strict全家桶无隐式any运行tsc --noEmit通过代码质量启用noUnusedLocals、noImplicitReturns确保无未使用变量构建配置合理target、module使用outDirtsc输出正确性能避免深度条件类型递归使用项目引用编译时间 10s中型项目工具链生产环境编译后运行使用tsc --build增量构建CI 中类型检查步骤依赖谨慎使用any尽量用unknown 守卫代码库any数量 10
TypeScript 完全指南（下）：从类型体操到生产级配置
上篇我们完成了 TypeScript 基础类型注解、接口、泛型、基本工具类型。但“会用”和“精通”之间横亘着类型编程的深水区。这篇将深入生产级 TypeScript 的核心实战——没有基础语法不注水全是硬核干货。一、类型守卫与自定义守卫让类型系统真正“懂你”1.1 内置类型守卫TypeScript 内置了四种类型守卫typeof区分string、number、boolean、symbol、bigint、function、objectinstanceof区分 ES class 实例in检查对象上是否存在某个属性可辨识联合 (Discriminated Union)利用共同的type字段1.2 自定义类型守卫is关键字写一个真正能收窄类型的函数typescriptinterface Cat { meow: () void; name: string; } interface Dog { bark: () void; age: number; } // 自定义守卫返回类型是 pet is Cat function isCat(pet: Cat | Dog): pet is Cat { return (pet as Cat).meow ! undefined; } // 使用 function play(pet: Cat | Dog) { if (isCat(pet)) { pet.meow(); // ✅ pet 被收窄为 Cat console.log(pet.name); } else { pet.bark(); // ✅ pet 被收窄为 Dog console.log(pet.age); } }与普通boolean的区别pet is Cat告诉 TypeScript 编译器“当函数返回 true 时传入的参数就是 Cat 类型”从而在if分支内自动收窄类型。1.3 守卫的高级模式asserts断言用于断言某个条件成立否则抛出错误。之后变量类型会被收窄typescriptfunction assertIsString(value: unknown): asserts value is string { if (typeof value ! string) { throw new Error(Not a string); } } let input: unknown hello; assertIsString(input); input.toUpperCase(); // ✅ 此时 input 被收窄为 string二、高级类型编程类型体操的核心心法2.1 条件类型Conditional TypesT extends U ? X : Y—— 根据类型关系动态选择类型。typescripttype IsArrayT T extends any[] ? true : false; type A IsArraystring[]; // true type B IsArraynumber; // false // 结合 infer类型推断 type ReturnTypeT T extends (...args: any[]) infer R ? R : never; type Fn (x: number) string; type R ReturnTypeFn; // string2.2 映射类型Mapped Types遍历联合类型生成新类型typescripttype ReadonlyT { readonly [P in keyof T]: T[P]; }; type PartialT { [P in keyof T]?: T[P]; }; // 更高级的添加或删除修饰符 type MutableT { -readonly [P in keyof T]: T[P]; // 移除 readonly }; type RequiredT { [P in keyof T]-?: T[P]; // 移除可选 ? };2.3 模板字面量类型Template Literal TypesTypeScript 4.1 提供的字符串类型编程能力typescripttype EventName on${Capitalizestring}; type ClickEvent EventName; // on${Capitalizestring}实际使用时需配合泛型 // 实际例子路由参数解析 type RouteParamsT extends string T extends ${infer _Start}:${infer Param}/${infer Rest} ? Param | RouteParamsRest : T extends ${infer _Start}:${infer Param} ? Param : never; type Params RouteParams/user/:id/post/:pid; // id | pid2.4 递归类型Recursive Types构建树形结构或深度操作typescripttype JsonValue | string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }; // 深度只读 type DeepReadonlyT { readonly [P in keyof T]: T[P] extends object ? DeepReadonlyT[P] : T[P]; };三、生产级工具类型精讲除了内置的Partial、Required、Pick、Omit、Record、Exclude、Extract、NonNullable、ReturnType、Parameters外这些也是必备的3.1AwaitedTTypeScript 4.5解开 Promise 的嵌套typescripttype Result AwaitedPromisePromisenumber; // number3.2NoInferTTypeScript 5.4阻止泛型推断从使用侧反向传播用于函数参数中强制指定泛型typescriptdeclare function createT(value: T, defaultValue: NoInferT): T; // 调用时 defaultValue 的类型必须精确匹配 T不会被推断扩展3.3 自定义高频工具类型DeepPartialT—— 递归可选typescripttype DeepPartialT T extends object ? { [P in keyof T]?: DeepPartialT[P] } : T;ValueOfT—— 获取对象所有值的联合类型typescripttype ValueOfT T[keyof T];OmitNeverT—— 过滤掉值为never的字段typescripttype OmitNeverT { [K in keyof T as T[K] extends never ? never : K]: T[K] };UnionToIntersectionU—— 联合类型转交叉类型高级技巧typescripttype UnionToIntersectionU (U extends any ? (k: U) void : never) extends (k: infer I) void ? I : never; // 例子: UnionToIntersection{ a: 1 } | { b: 2 } { a: 1 } { b: 2 }四、TSConfig 生产级配置4.1 核心编译选项tsconfig.json生产项目建议开启以下严格模式全家桶json{ compilerOptions: { // 严格模式建议全部 true strict: true, // 总开关开启下面所有 noImplicitAny: true, // 禁止隐式 any strictNullChecks: true, // null/undefined 严格检查 strictFunctionTypes: true, // 函数类型双向协变检查 strictBindCallApply: true, // bind/call/apply 严格检查 strictPropertyInitialization: true,// 类属性必须初始化 noImplicitThis: true, // this 隐式 any 报错 alwaysStrict: true, // 每个文件生成 use strict // 额外安全选项 noUnusedLocals: true, // 禁止未使用的局部变量 noUnusedParameters: true, // 禁止未使用的参数 noImplicitReturns: true, // 函数所有分支必须显式返回 noFallthroughCasesInSwitch: true, // switch 禁止落空 // 模块与输出 module: NodeNext, // 或 ESNext 取决于目标环境 moduleResolution: NodeNext, target: ES2022, // 现代 Node.js 可用 ES2022 lib: [ES2022], outDir: ./dist, rootDir: ./src, removeComments: true, // 生产去除注释 sourceMap: false, // 生产一般不需要 source map调试用可保留 declaration: true, // 生成 .d.ts库项目 declarationMap: false, // 库项目可开启 // 其他 esModuleInterop: true, skipLibCheck: true, // 提升编译速度生产不建议 false forceConsistentCasingInFileNames: true }, include: [src/**/*], exclude: [node_modules, dist, **/*.test.ts] }4.2tsc --noEmit与tsc --build--noEmit只做类型检查不输出 JS。CI 中用于验证类型正确性--build项目引用增量编译大型 monorepo 必备4.3 项目引用Project References拆分大型项目为多个子项目加速编译json// tsconfig.base.json { compilerOptions: { composite: true, declaration: true } } // packages/core/tsconfig.json { extends: ../../tsconfig.base.json, compilerOptions: { outDir: ./dist }, references: [] // 无依赖 } // packages/app/tsconfig.json { extends: ../../tsconfig.base.json, references: [{ path: ../core }] }构建命令tsc --build packages/core packages/app。五、类型性能优化大型项目编译慢往往是因为复杂类型导致 TS 服务器负担过重。5.1 避免过度条件类型typescript// ❌ 差深度嵌套条件类型 type DeepTypeT T extends string ? T extends ${infer A}.${infer B} ? A extends a ? ... : ... : ... : ...; // ✅ 好拆分为多个辅助类型 使用映射类型代替条件递归5.2 使用type代替interface的时机interface适合声明对象形状、类、可合并扩展type适合联合、交叉、映射、条件类型优先使用interface直到需要type的特性5.3 减少递归深度默认递归深度限制为 1000深度递归类型会导致编译失败或极慢。可用尾递归优化模式但 TS 不支持真正的尾递归消除需手动展平。5.4 避免any泄漏any会关闭类型检查并传播。使用unknown 类型守卫代替。5.5 性能度量bash# 生成性能追踪 tsc --generateTrace trace # 上传到 https://www.typescriptlang.org/play?#code/ 分析热路径六、装饰器现代 TypeScriptTypeScript 5.0 支持Stage 3 装饰器标准与之前实验性装饰器不兼容。6.1 标准装饰器基本用法typescriptfunction loggedThis, Args extends any[], Return( target: (this: This, ...args: Args) Return, context: ClassMethodDecoratorContextThis, (this: This, ...args: Args) Return ) { return function(this: This, ...args: Args): Return { console.log(Calling ${String(context.name)} with, args); return target.call(this, ...args); }; } class Example { logged greet(name: string) { return Hello, ${name}; } }6.2 生产级装饰器场景依赖注入、日志、性能监控typescript// 简单的性能计时装饰器 function timeThis, Args extends any[], Return( fn: (this: This, ...args: Args) Return, ctx: ClassMethodDecoratorContext ) { return function(this: This, ...args: Args): Return { const start performance.now(); const result fn.call(this, ...args); const end performance.now(); console.log(${String(ctx.name)} took ${end - start}ms); return result; }; }注意标准装饰器不能改变方法签名不能直接修改类结构除非返回一个新的类。七、与 React/Vue 生产级整合要点7.1 React TypeScript 最佳实践tsx// 组件 props 类型定义 interface ButtonProps { children: React.ReactNode; onClick?: () void; variant?: primary | secondary; } // 使用 FC 或显式声明 const Button ({ children, onClick, variant primary }: ButtonProps) { return button onClick{onClick} className{variant}{children}/button; }; // 事件处理类型 const handleChange (e: React.ChangeEventHTMLInputElement) { console.log(e.target.value); }; // useRef 用于 DOM const inputRef useRefHTMLInputElement(null);7.2 Vue 3 TypeScriptvuescript setup langts interface Props { title: string; count?: number; } const props withDefaults(definePropsProps(), { count: 0 }); const emit defineEmits{ (e: update, value: number): void; (e: close): void; }(); /script八、TypeScript 编译流程与生态系统工具8.1ts-nodevstsxvstsimp工具特点适用场景ts-node老牌支持swc加速开发脚本tsx(基于 esbuild)极快开箱即用开发、工具链tsimp(基于 swc)快速TypeScript 官方推荐实验性ESM 项目生产环境永远先编译再运行tsc→node dist/index.js。8.2 类型定义发布库项目必须生成.d.tsjson// package.json { types: ./dist/index.d.ts, exports: { .: { import: ./dist/index.js, types: ./dist/index.d.ts } } }8.3 Monorepo 工具链pnpm workspace tsc --build轻量Nx企业级Turborepo与 tsc 配合良好九、实战实现一个类型安全的 Event Bustypescripttype EventMap { user-login: { userId: string; timestamp: number }; user-logout: { userId: string }; data-update: { id: number; payload: unknown }; }; class TypedEventEmitterT extends Recordstring, any { private listeners new Mapkeyof T, Set(data: any) void(); onK extends keyof T(event: K, handler: (data: T[K]) void): void { if (!this.listeners.has(event)) { this.listeners.set(event, new Set()); } this.listeners.get(event)!.add(handler); } emitK extends keyof T(event: K, data: T[K]): void { const handlers this.listeners.get(event); if (handlers) { handlers.forEach(handler handler(data)); } } } const emitter new TypedEventEmitterEventMap(); emitter.on(user-login, (data) { console.log(data.userId, data.timestamp); // ✅ 类型安全 }); emitter.emit(user-login, { userId: 123, timestamp: Date.now() });十、总结生产级 TypeScript 检查清单类别检查项验收动作类型安全开启strict全家桶无隐式any运行tsc --noEmit通过代码质量启用noUnusedLocals、noImplicitReturns确保无未使用变量构建配置合理target、module使用outDirtsc输出正确性能避免深度条件类型递归使用项目引用编译时间 10s中型项目工具链生产环境编译后运行使用tsc --build增量构建CI 中类型检查步骤依赖谨慎使用any尽量用unknown 守卫代码库any数量 10
