简介一份系统讲解TypeScript数据类型的PDF教程专为刚入门或对类型体系理解不深的开发者设计帮助理清基础类型、枚举、接口和类之间的联系减少日常开发中的类型报错。教程内容以数据类型为主线依次覆盖布尔值、数字、字符串、数组、元组等基础类型再展开枚举与外部枚举随后重点分析接口的多种应用方式包括可选属性、函数类型、数组类型、类类型、接口继承、混合类型、接口继承类以及类静态部分与实例部分的区别每种用法均配有可直接运行的代码示例读者可边学边改快速验证。整份资料为单个PDF文档压缩包内共1个文件大小仅1.75MB便携易用适合离线阅读或打印。目前已有1099人学习下载尤其适合需要系统梳理TypeScript类型体系的前端开发者和正在转向工程化JavaScript编程的学习者既能作为入门教材也可在项目开发中随手查阅帮助写出结构更清晰、更健壮的代码。1. TypeScript 教程怎么读一份手册型资源的打开方式这份 TypeScript 课程资源我拆过不止一遍典型特征是「手册体」基础数据类型、枚举、接口、类、命名空间、模块、函数、泛型、声明合并、类型推导、类型兼容性一直到 d.ts 编写和可迭代性十几个章节按语言特性逐条展开。它不是视频课也没有按「看完就能写项目」设计进度而是每个主题给定义、示例、边界说明。适合两类人刚把 TS 装进项目、每天被类型报错逼疯的开发者以及写了半年 TS、只会用 any 和 interface 的熟手。前者能照着一章一章补基础后者可以直接翻到模块、d.ts、类型兼容性这几章对答案。我一般会先通读「类型推导」和「类型兼容性」两章再回头看基础部分因为很多报错不是语法问题是推导和兼容性没想清楚。这份资源正好把这两块放在靠后的位置逼你先踩坑再看原理。2. 基础类型与枚举先分清哪些是类型哪些是语法糖2.1 六类基础类型boolean、number、string、array、tuple 的声明差异let isDone: boolean false; let decLiteral: number 6; let hexLiteral: number 0xf00d; let binaryLiteral: number 0b1010; let octalLiteral: number 0o744;逻辑说明这段代码把 TS 里最常碰到的几种数值字面量全部摆出来了。boolean 只有 true 和 false 两个值number 不区分整型和浮点型这点和很多从 Java 转过来的开发者习惯不同。0xf00d 是十六进制0b1010 是二进制0o744 是八进制TS 的 number 类型一个都不排斥。参数说明很多初学者以为 0o 开头的八进制需要额外配置编译器其实这只是数值字面量编译目标 target 参数只管语法降级不管数值解析。真正要注意的是 strictNullChecks 开启后number 类型不能直接赋 null否则会报「Type null is not assignable to type number」。数组的两种写法在项目里经常混用let list1: number[] [1, 2, 3]; let list2: Arraynumber [1, 2, 3];逻辑说明number[] 和 Array 完全等价选哪种纯粹是团队风格问题。我一般固定用 number[]因为更短读起来更接近「这个数组里全是数字」的自然语义。如果你在一个项目里两种都写格式化工具救不了code review 时每次都要争论。参数说明数组泛型写法 Array 在 JSX 文件里会和标签解析冲突所以 React 项目里推荐用 number[] 更省事。遇到多维数组number[][] 比 ArrayArray 清晰得多。元组是 TS 里容易被低估的类型let x: [string, number]; x [hello, 10]; // OK x [10, hello]; // Error逻辑说明元组表示「长度固定、各位置类型不同」的数组。x 的第一个位置必须是 string第二个位置必须是 number。反过来赋值会在编译期直接报错这种约束是普通数组给不了的。参数说明元组的长度约束只在字面量赋值时生效。如果你声明了 [string, number] 的元组然后调用 x.push(100)TS 默认不会报错因为 push 的参数类型是 string | number 的联合类型。这个「能 push 越界元素」的行为是元组最常翻车的地方资料里没细讲但实际面试题里反复出现。2.2 枚举的默认值与外部枚举declare enum 的适用场景enum Color {Red, Green, Blue} let c: Color Color.Green;逻辑说明不指定成员值时枚举从 0 开始递增所以 Color.Red 是 0Color.Green 是 1。数字枚举在运行时是双向映射的Color[0] 能取回 Red这在调试 switch 分支时很有用。但代价是编译产物里会长出一段反向映射代码枚举成员越多冗余越多。常见做法是如果枚举值只在代码内部使用不关心运行时表现直接写数字枚举。如果枚举要输出给后端或写入数据库我会给每个成员显式赋值防止别人在中间插入一个成员导致所有下游值错位。外部枚举解决的是「JS 里已有常量对象TS 里想拿到类型形状」的场景declare enum Fish { Shark 1, Tuna }逻辑说明declare enum 编译时不生成任何代码它只提供类型信息。适合引用某个全局的 JS 常量对象不想 import只想让 TS 在编译期知道你用的值合法。这里的 Shark 1Tuna 自动是 2。参数说明declare enum 和普通 enum 不要混在同一个文件里否则生成代码时行为分裂。另外 declare enum 被编译后不存在于运行时如果你在代码里访问 Fish.Shark实际运行时会拿不到值。所以这个语法只适合声明外部全局变量不适合自己项目内部的常量定义。2.3 空值与关于 let资料里专门讲 let 的原因资料里有一小节叫「关于 let」看似只有一句其实值得展开。let 声明的变量可以被重新赋值类型在声明时确定。与之相对const 声明的变量不能重新赋值但如果赋的是对象对象内部的属性还是可以改的。TS 里写类型标注时let 配合类型收窄非常有用let value: number | string 10; value hello; console.log(value.length); // OK此时 value 收窄为 string逻辑说明value 的静态类型是联合类型 number | string但赋值 hello 之后在下一行代码里 TS 能推导出 value 是 string所以访问 .length 不报错。这个「赋值即收窄」的规则是理解后面类型推导章节的基础。空值 void 一般只用于函数返回值表示没有返回值。真正容易被忽略的是 strict 参数严格模式下undefined 和 null 不能直接赋给 number。所以很多新手照着教程写 let age: number null在 tsconfig 开了 strict 后直接报错。这不是教程错了是教程默认的 tsconfig 参数和你本地的不同。我一般用 void 0 来判断空值而不是直接到处写 null避免 strict 模式下不必要的报错。资料正文里有些「严禁复制」字样的水印是文档转换时留下的防复制标记不影响阅读和代码运行。读的时候直接跳过就好。3. 接口与类把结构的约束写到代码里3.1 接口初探可选属性、函数类型与多余属性检查interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } printLabel({ label: TS, size: 10 }); // Error const obj { label: TS, size: 10 }; printLabel(obj); // OK逻辑说明接口描述的是结构而不是实现传入对象只要有 label 字段就能用。但这里藏着一个新手最容易迷惑的现象同一个对象字面量直接作为参数传会报「对象字面量只能指定已知属性」先赋值给中间变量再传就不报。这不是编译器抽风而是 TS 刻意设计的「多余属性检查」——它只针对对象字面量因为字面量直接传说明开发者想精确匹配而变量可能是从别处组装来的类型已经从变量推导过了。参数说明如果你明确知道某个对象会传多个字段但接口里只想暴露一部分有两个选择一是把接口字段全部列全二是让字段可选。可选属性用问号标记interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare {color: white, area: 100}; if (config.color) { newSquare.color config.color; } if (config.width) { newSquare.area config.width * config.width; } return newSquare; }逻辑说明config.color 和 config.width 都是可选属性函数内部使用前先判断避免 undefined 参与运算。if (config.color) 成立后TS 会自动把 config.color 收窄为 string后续赋值不会报类型错。接口还能描述函数形状interface SearchFunc { (source: string, subString: string): boolean; }逻辑说明这种接口声明后可以直接作为函数类型使用比如 let fn: SearchFunc function(source, subString) { return source.includes(subString); }。它和 type 定义函数类型相比最大区别是接口支持声明合并同名接口会自动合并成员type 不行。函数重载本质上就是多个函数类型声明的叠加把重载列表理解成「多个调用签名」接口里写多个调用签名也能达到类似效果。3.2 类修饰符的真实边界public、private、protectedclass Animal { public name: string; private age: number; protected kind: string; constructor(name: string, age: number, kind: string) { this.name name; this.age age; this.kind kind; } } class Dog extends Animal { constructor(name: string, age: number) { super(name, age, dog); } getAge() { // console.log(this.age); // Error子类不能访问 private console.log(this.kind); // OKprotected 允许子类访问 } }逻辑说明public 是默认修饰符不写也是 publicprivate 只能在类内部访问子类也不行protected 允许子类访问但外部实例访问不了。这里的边界对设计类层次结构很重要银行卡号这类字段用 private只有自己能用品牌、型号这类字段用 protected子类可以读但不能被外部随便改写。常见误区TS 的 private 只是编译期约束编译成 JS 后字段照样可以通过 obj.age 访问。如果你在写库或者处理敏感数据真正的运行时私有要使用 ECMAScript 的 # 前缀。TS 的 private 更多是给团队协作时看的让编译器帮你拦住越权访问。参数属性可以省掉大量模板代码class Person { constructor(private name: string, public age: number) {} }逻辑说明构造函数参数前加修饰符TS 会自动把这个参数声明为实例属性并赋值等价于手动写 this.name name; this.age age;。参数属性在依赖注入场景里尤其爽一个构造函数把声明、赋值、访问控制全干了。参数说明参数属性里可以叠加 readonly比如 constructor(public readonly id: string)。加了 readonly 后这个属性只能在构造函数里赋一次值其余地方任何赋值都会报错。存取器 getter/setter 也和修饰符配合使用对外暴露 get 方法、隐藏 set 方法是封装状态的标准姿势。3.3 抽象类与把类当接口使用extends 的边界abstract class Animal { abstract makeSound(): void; move(): void { console.log(roaming); } } class Dog extends Animal { makeSound() { console.log(bark); } }逻辑说明抽象类可以包含具体方法和抽象方法抽象方法没有实现子类必须重写。抽象类不能直接 new只能被继承。这个设计适合「基类有公共行为、但某个动作必须由子类决定」的场景比如所有动物都会移动但叫声各不相同。另一个容易混淆的写法是把类当接口用class Point { x: number 0; y: number 0; } interface Point3d extends Point { z: number; }逻辑说明interface Point3d extends Point 继承的是 Point 的实例类型不是构造函数类型。也就是说 Point3d 描述的对象必须有 x、y、z 三个字段。很多人以为 extends 一个类就能拿到构造类型其实想要构造函数类型应该用 typeof Point两者差得很远。混入机制也和这里相关TS 的 mixin 可以理解成「函数参数是类、返回值是类」的组合再把结果合并到一个目标类上。声明合并章节会讲接口和类的合并规则混入本质上就是利用这些规则把多个类的行为拼装起来。4. 模块与命名空间代码组织的取舍4.1 导出导入的四种姿势default、named、export 与 import *// config.ts export interface Config { debug: boolean; } export default function loadConfig(path: string): Config { return { debug: true }; }逻辑说明export default 适合「一个文件只导出一个主对象」的模块。资料里的原话是「如果仅导出单个 class 或 function使用 export default」这是官方推荐。但 default 导出的名字由导入方决定所以团队里最好约定默认导出的命名规则否则同一个模块在不同文件里被起五个名字检索起来很痛苦。命名导出的导入写法import { Config } from ./config; import * as configModule from ./config;逻辑说明第一种按名字导入只把需要的符号拉进来第二种把整个模块挂到一个变量下访问时写 configModule.Config。当你要从一个模块里import十几个名字时用 import * as 一坨挂起来反而清楚这就是资料里说的「命名空间导入模式」。副作用导入和旧式模块写法import ./polyfill; // 只执行模块不绑定导出 // 旧式 CommonJS 模块写法 class Validator { } export Validator;import Validator require(./Validator);逻辑说明副作用导入常用于全局样式、polyfill 这类「执行代码就够」的模块。export 是给 CommonJS 风格模块用的必须和 import require() 配对。新项目里我不建议写但老代码里到处都是。参数说明遇到 export 的文件tsconfig 里 module 参数要配成 commonjs 才顺畅如果配成 esnext这种写法会直接编译报错 or 行为异常。升级老项目时看到一片 import xxx require() 报错先检查 module 参数这是最常见的翻车原因。4.2 命名空间与模块什么时候用 namespace资料里有一句非常关键的话「模块里不要使用命名空间」。原因是 namespace 挂到全局作用域模块走局部作用域两者混在一起会形成双份作用域查找链变长编译产物也很怪。命名空间适合的场景是没有模块加载器、直接用多个 script 标签顺序引入的环境。比如资料里的验证器例子把一组验证函数收敛到一个 namespace 里避免污染 windownamespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } const lettersRegexp /^[a-zA-Z]$/; export class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } }逻辑说明namespace 里不带 export 的声明外部访问不到lettersRegexp 只有 Validation 内部能用这是 namespace 的封装边界。外部通过 Validation.LettersOnlyValidator 取到导出成员。参数说明多文件 namespace 靠三斜线指令关联写法是 /// 。这个语法在模块场景里是坏味道资料「命名空间和模块的陷阱」里专门点名对模块使用 /// 会让模块加载行为混乱正确姿势是直接 import。也就是说三斜线指令只保留给全局 script 场景用一旦项目用了 import/export就别再碰它。4.3 外部 JavaScript 库与 d.ts 的编写流程资料最后有一章「编写定义文件.d.ts」很多人跳过了但项目里引用老 JS 库时一定会碰上。d.ts 文件的流程其实很固定先看库暴露的是全局对象还是模块导出再决定用 declare namespace 还是 declare module。// 全局库暴露在 window 上的对象 declare namespace MyLib { function hello(name: string): void; }// 模块库通过 import 引入的 npm 包 declare module legacy-lib { export function hello(name: string): void; }逻辑说明declare namespace MyLib 声明了一个全局命名空间适合通过 script 标签引入的老库。declare module legacy-lib 是给 npm 包补类型壳import { hello } from legacy-lib 之后TS 会从这段声明里找类型。参数说明遇到没有任何 .d.ts 的老库正确顺序是先查类型声明社区仓库没有再自己补。自己在项目里新建一个 declarations.d.ts把用到的函数逐个声明出来。注意 declare module 里的导出接口要和你实际调用的 API 对齐——多写不会报错但会让类型检查失效少写会让你后续访问任何未声明的属性时报错。实际上这里最常见的习惯是先把用到的函数全部声明成 any 参数跑通后再逐步细化类型别一上来追求完美。5. 泛型、推导与兼容性五条高频避坑记录5.1 泛型约束失效extends 只约束类型参数不约束运行时现象写了 function f (x: T)以为传进来的东西一定是对象。结果 null 和 undefined 照样能传进去运行时一访问属性就崩。原因extends object 约束的是类型层面的边界不是运行时判断。如果 tsconfig 没开 strictNullChecksnull 可以赋值给任何类型就算开了T extends object 也不会自动排除 undefined。泛型约束管的是「你能传什么类型」管不了「运行时会传什么值」。解决在函数入口做一次显式检查或者把约束写得更严格function fT extends object(x: T) { if (x null) { throw new Error(x must not be null); } }逻辑说明这个问号判断把 null 和 undefined 一起拦住运行时防御。泛型约束适合限制类型范围但不能替代参数校验尤其是写对外 API 时。5.2 类型推导失灵什么时候必须显式标注现象map 回调里返回一个对象TS 推导出的字段类型比预期宽比如把 null 推导成 any后面过滤时怎么都报不对。原因上下文类型推导在三个场景里最容易出问题回调函数、泛型函数、复杂对象字面量。推导结果往往是宽泛的联合类型看起来没报错一用就错。解决不要迷信推导。凡是返回对象结构的函数显式写返回类型凡是暴露给其他模块的 API显式写参数和返回类型。内部实现的局部变量可以交给推导反正错了也只在局部。5.3 函数参数双向协变strictFunctionTypes 下的意外现象把 (x: Animal) void 的函数赋给 (x: Dog) void以为安全开启 strictFunctionTypes 后直接报错。原因开启 strictFunctionTypes 后函数参数是逆变检查。接受 Animal 的函数不能赋值给接受 Dog 的函数因为调用方可能传入更具体的 Dog而函数体里按 Animal 处理类型上就不安全。这个规则在旧版本 TS 里是双向协变的宽松检查新版本收紧了。解决回调签名里用具体类型不要用父类型兜底。如果确实需要通用的回调把参数声明为联合类型或者泛型别指望 Animal 兜住所有子类。5.4 枚举与数字字面量的兼容性误判现象enum Color { Red, Green }函数参数类型写 Color传入 1 不报错传入 2 就报错非常迷惑。原因数字枚举和 number 之间存在部分兼容枚举成员值可以被当作字面量类型使用但反向不成立。也就是说 Color 类型实际接受的是枚举成员的值不是任意数字。解决这种「枚举值当常量用」的场景直接用 const 对象加 as const 更干净。枚举留给真正需要命名常量和反向映射的地方。资料里枚举部分如果只讲了语法没讲这个坑一定要自己补上这条认知。5.5 泛型工具类型的误解keyof 和 typeof 的顺序现象想取一个类的所有属性名写 type Keys keyof MyClass 拿不到想要的集合改成 keyof typeof MyClass 才对。原因typeof MyClass 取的是类的静态类型也就是构造函数类型keyof 它拿的是静态成员名直接 keyof MyClass 拿的是实例成员名。如果类里没有实例属性只有方法keyof MyClass 拿到的是方法名不是属性名和预期差很远。解决先想清楚「我要的是值还是类型」。typeof 用在值上keyof 用在类型上连写 keyof typeof 就是把值先变成类型再取键名。这个顺序记牢能少踩一半泛型工具的坑。6. 最后一公里声明合并与 Symbol.iterator 的实战组合资料里的「声明合并」和「可迭代性」「Symbols」是三章独立的主题实际使用时经常组合出有用的技巧。比如给一个类补充可迭代能力让它可以被 for..of 消费同时不破坏原有结构class Range { constructor(public start: number, public end: number) {} } interface Range { [Symbol.iterator](): Iteratornumber; } Range.prototype[Symbol.iterator] function () { let current this.start; const end this.end; return { next(): IteratorResultnumber { if (current end) { return { value: current, done: false }; } return { value: undefined, done: true }; } }; };逻辑说明这里利用接口声明合并给 Range 类补上了 [Symbol.iterator] 的类型签名类的实现部分通过原型挂载真正的迭代器方法。声明合并让同一个类名同时拥有类实现和接口约束类负责逻辑接口负责类型描述两者互不污染。然后代码就能这样跑for (const n of new Range(1, 5)) { console.log(n); // 1 2 3 4 5 }逻辑说明for..of 走的是迭代器协议拿的是迭代器每次返回的 value。for..in 走的是属性枚举拿到的是属性名。资料里「for..of vs for..in」一节反复强调的就是这个区别for..in 用在数组上拿到的是字符串下标不是元素值这是经典翻车点。参数说明这种迭代器写法对 target 参数敏感。如果 tsconfig 里 target 是 ES5 或 ES3for..of 需要编译器生成迭代器辅助代码依赖 Symbol 相关 polyfill如果 target 是 ES2015 或更高原生支持迭代器不需要额外处理。资料里「代码生成」一节对这部分有专门说明。从那以后我遇到「对象不像数组但想被遍历」的需求第一反应就是声明合并加 Symbol.iterator而不是硬塞一个 toArray 方法。这个套路本身是通用的而且声明合并的边界恰好能保证类型和实现在同一个名字下不分离。希望帮到你。本文还有配套的精品资源点击获取
简介一份系统讲解TypeScript数据类型的PDF教程专为刚入门或对类型体系理解不深的开发者设计帮助理清基础类型、枚举、接口和类之间的联系减少日常开发中的类型报错。教程内容以数据类型为主线依次覆盖布尔值、数字、字符串、数组、元组等基础类型再展开枚举与外部枚举随后重点分析接口的多种应用方式包括可选属性、函数类型、数组类型、类类型、接口继承、混合类型、接口继承类以及类静态部分与实例部分的区别每种用法均配有可直接运行的代码示例读者可边学边改快速验证。整份资料为单个PDF文档压缩包内共1个文件大小仅1.75MB便携易用适合离线阅读或打印。目前已有1099人学习下载尤其适合需要系统梳理TypeScript类型体系的前端开发者和正在转向工程化JavaScript编程的学习者既能作为入门教材也可在项目开发中随手查阅帮助写出结构更清晰、更健壮的代码。1. TypeScript 教程怎么读一份手册型资源的打开方式这份 TypeScript 课程资源我拆过不止一遍典型特征是「手册体」基础数据类型、枚举、接口、类、命名空间、模块、函数、泛型、声明合并、类型推导、类型兼容性一直到 d.ts 编写和可迭代性十几个章节按语言特性逐条展开。它不是视频课也没有按「看完就能写项目」设计进度而是每个主题给定义、示例、边界说明。适合两类人刚把 TS 装进项目、每天被类型报错逼疯的开发者以及写了半年 TS、只会用 any 和 interface 的熟手。前者能照着一章一章补基础后者可以直接翻到模块、d.ts、类型兼容性这几章对答案。我一般会先通读「类型推导」和「类型兼容性」两章再回头看基础部分因为很多报错不是语法问题是推导和兼容性没想清楚。这份资源正好把这两块放在靠后的位置逼你先踩坑再看原理。2. 基础类型与枚举先分清哪些是类型哪些是语法糖2.1 六类基础类型boolean、number、string、array、tuple 的声明差异let isDone: boolean false; let decLiteral: number 6; let hexLiteral: number 0xf00d; let binaryLiteral: number 0b1010; let octalLiteral: number 0o744;逻辑说明这段代码把 TS 里最常碰到的几种数值字面量全部摆出来了。boolean 只有 true 和 false 两个值number 不区分整型和浮点型这点和很多从 Java 转过来的开发者习惯不同。0xf00d 是十六进制0b1010 是二进制0o744 是八进制TS 的 number 类型一个都不排斥。参数说明很多初学者以为 0o 开头的八进制需要额外配置编译器其实这只是数值字面量编译目标 target 参数只管语法降级不管数值解析。真正要注意的是 strictNullChecks 开启后number 类型不能直接赋 null否则会报「Type null is not assignable to type number」。数组的两种写法在项目里经常混用let list1: number[] [1, 2, 3]; let list2: Arraynumber [1, 2, 3];逻辑说明number[] 和 Array 完全等价选哪种纯粹是团队风格问题。我一般固定用 number[]因为更短读起来更接近「这个数组里全是数字」的自然语义。如果你在一个项目里两种都写格式化工具救不了code review 时每次都要争论。参数说明数组泛型写法 Array 在 JSX 文件里会和标签解析冲突所以 React 项目里推荐用 number[] 更省事。遇到多维数组number[][] 比 ArrayArray 清晰得多。元组是 TS 里容易被低估的类型let x: [string, number]; x [hello, 10]; // OK x [10, hello]; // Error逻辑说明元组表示「长度固定、各位置类型不同」的数组。x 的第一个位置必须是 string第二个位置必须是 number。反过来赋值会在编译期直接报错这种约束是普通数组给不了的。参数说明元组的长度约束只在字面量赋值时生效。如果你声明了 [string, number] 的元组然后调用 x.push(100)TS 默认不会报错因为 push 的参数类型是 string | number 的联合类型。这个「能 push 越界元素」的行为是元组最常翻车的地方资料里没细讲但实际面试题里反复出现。2.2 枚举的默认值与外部枚举declare enum 的适用场景enum Color {Red, Green, Blue} let c: Color Color.Green;逻辑说明不指定成员值时枚举从 0 开始递增所以 Color.Red 是 0Color.Green 是 1。数字枚举在运行时是双向映射的Color[0] 能取回 Red这在调试 switch 分支时很有用。但代价是编译产物里会长出一段反向映射代码枚举成员越多冗余越多。常见做法是如果枚举值只在代码内部使用不关心运行时表现直接写数字枚举。如果枚举要输出给后端或写入数据库我会给每个成员显式赋值防止别人在中间插入一个成员导致所有下游值错位。外部枚举解决的是「JS 里已有常量对象TS 里想拿到类型形状」的场景declare enum Fish { Shark 1, Tuna }逻辑说明declare enum 编译时不生成任何代码它只提供类型信息。适合引用某个全局的 JS 常量对象不想 import只想让 TS 在编译期知道你用的值合法。这里的 Shark 1Tuna 自动是 2。参数说明declare enum 和普通 enum 不要混在同一个文件里否则生成代码时行为分裂。另外 declare enum 被编译后不存在于运行时如果你在代码里访问 Fish.Shark实际运行时会拿不到值。所以这个语法只适合声明外部全局变量不适合自己项目内部的常量定义。2.3 空值与关于 let资料里专门讲 let 的原因资料里有一小节叫「关于 let」看似只有一句其实值得展开。let 声明的变量可以被重新赋值类型在声明时确定。与之相对const 声明的变量不能重新赋值但如果赋的是对象对象内部的属性还是可以改的。TS 里写类型标注时let 配合类型收窄非常有用let value: number | string 10; value hello; console.log(value.length); // OK此时 value 收窄为 string逻辑说明value 的静态类型是联合类型 number | string但赋值 hello 之后在下一行代码里 TS 能推导出 value 是 string所以访问 .length 不报错。这个「赋值即收窄」的规则是理解后面类型推导章节的基础。空值 void 一般只用于函数返回值表示没有返回值。真正容易被忽略的是 strict 参数严格模式下undefined 和 null 不能直接赋给 number。所以很多新手照着教程写 let age: number null在 tsconfig 开了 strict 后直接报错。这不是教程错了是教程默认的 tsconfig 参数和你本地的不同。我一般用 void 0 来判断空值而不是直接到处写 null避免 strict 模式下不必要的报错。资料正文里有些「严禁复制」字样的水印是文档转换时留下的防复制标记不影响阅读和代码运行。读的时候直接跳过就好。3. 接口与类把结构的约束写到代码里3.1 接口初探可选属性、函数类型与多余属性检查interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } printLabel({ label: TS, size: 10 }); // Error const obj { label: TS, size: 10 }; printLabel(obj); // OK逻辑说明接口描述的是结构而不是实现传入对象只要有 label 字段就能用。但这里藏着一个新手最容易迷惑的现象同一个对象字面量直接作为参数传会报「对象字面量只能指定已知属性」先赋值给中间变量再传就不报。这不是编译器抽风而是 TS 刻意设计的「多余属性检查」——它只针对对象字面量因为字面量直接传说明开发者想精确匹配而变量可能是从别处组装来的类型已经从变量推导过了。参数说明如果你明确知道某个对象会传多个字段但接口里只想暴露一部分有两个选择一是把接口字段全部列全二是让字段可选。可选属性用问号标记interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare {color: white, area: 100}; if (config.color) { newSquare.color config.color; } if (config.width) { newSquare.area config.width * config.width; } return newSquare; }逻辑说明config.color 和 config.width 都是可选属性函数内部使用前先判断避免 undefined 参与运算。if (config.color) 成立后TS 会自动把 config.color 收窄为 string后续赋值不会报类型错。接口还能描述函数形状interface SearchFunc { (source: string, subString: string): boolean; }逻辑说明这种接口声明后可以直接作为函数类型使用比如 let fn: SearchFunc function(source, subString) { return source.includes(subString); }。它和 type 定义函数类型相比最大区别是接口支持声明合并同名接口会自动合并成员type 不行。函数重载本质上就是多个函数类型声明的叠加把重载列表理解成「多个调用签名」接口里写多个调用签名也能达到类似效果。3.2 类修饰符的真实边界public、private、protectedclass Animal { public name: string; private age: number; protected kind: string; constructor(name: string, age: number, kind: string) { this.name name; this.age age; this.kind kind; } } class Dog extends Animal { constructor(name: string, age: number) { super(name, age, dog); } getAge() { // console.log(this.age); // Error子类不能访问 private console.log(this.kind); // OKprotected 允许子类访问 } }逻辑说明public 是默认修饰符不写也是 publicprivate 只能在类内部访问子类也不行protected 允许子类访问但外部实例访问不了。这里的边界对设计类层次结构很重要银行卡号这类字段用 private只有自己能用品牌、型号这类字段用 protected子类可以读但不能被外部随便改写。常见误区TS 的 private 只是编译期约束编译成 JS 后字段照样可以通过 obj.age 访问。如果你在写库或者处理敏感数据真正的运行时私有要使用 ECMAScript 的 # 前缀。TS 的 private 更多是给团队协作时看的让编译器帮你拦住越权访问。参数属性可以省掉大量模板代码class Person { constructor(private name: string, public age: number) {} }逻辑说明构造函数参数前加修饰符TS 会自动把这个参数声明为实例属性并赋值等价于手动写 this.name name; this.age age;。参数属性在依赖注入场景里尤其爽一个构造函数把声明、赋值、访问控制全干了。参数说明参数属性里可以叠加 readonly比如 constructor(public readonly id: string)。加了 readonly 后这个属性只能在构造函数里赋一次值其余地方任何赋值都会报错。存取器 getter/setter 也和修饰符配合使用对外暴露 get 方法、隐藏 set 方法是封装状态的标准姿势。3.3 抽象类与把类当接口使用extends 的边界abstract class Animal { abstract makeSound(): void; move(): void { console.log(roaming); } } class Dog extends Animal { makeSound() { console.log(bark); } }逻辑说明抽象类可以包含具体方法和抽象方法抽象方法没有实现子类必须重写。抽象类不能直接 new只能被继承。这个设计适合「基类有公共行为、但某个动作必须由子类决定」的场景比如所有动物都会移动但叫声各不相同。另一个容易混淆的写法是把类当接口用class Point { x: number 0; y: number 0; } interface Point3d extends Point { z: number; }逻辑说明interface Point3d extends Point 继承的是 Point 的实例类型不是构造函数类型。也就是说 Point3d 描述的对象必须有 x、y、z 三个字段。很多人以为 extends 一个类就能拿到构造类型其实想要构造函数类型应该用 typeof Point两者差得很远。混入机制也和这里相关TS 的 mixin 可以理解成「函数参数是类、返回值是类」的组合再把结果合并到一个目标类上。声明合并章节会讲接口和类的合并规则混入本质上就是利用这些规则把多个类的行为拼装起来。4. 模块与命名空间代码组织的取舍4.1 导出导入的四种姿势default、named、export 与 import *// config.ts export interface Config { debug: boolean; } export default function loadConfig(path: string): Config { return { debug: true }; }逻辑说明export default 适合「一个文件只导出一个主对象」的模块。资料里的原话是「如果仅导出单个 class 或 function使用 export default」这是官方推荐。但 default 导出的名字由导入方决定所以团队里最好约定默认导出的命名规则否则同一个模块在不同文件里被起五个名字检索起来很痛苦。命名导出的导入写法import { Config } from ./config; import * as configModule from ./config;逻辑说明第一种按名字导入只把需要的符号拉进来第二种把整个模块挂到一个变量下访问时写 configModule.Config。当你要从一个模块里import十几个名字时用 import * as 一坨挂起来反而清楚这就是资料里说的「命名空间导入模式」。副作用导入和旧式模块写法import ./polyfill; // 只执行模块不绑定导出 // 旧式 CommonJS 模块写法 class Validator { } export Validator;import Validator require(./Validator);逻辑说明副作用导入常用于全局样式、polyfill 这类「执行代码就够」的模块。export 是给 CommonJS 风格模块用的必须和 import require() 配对。新项目里我不建议写但老代码里到处都是。参数说明遇到 export 的文件tsconfig 里 module 参数要配成 commonjs 才顺畅如果配成 esnext这种写法会直接编译报错 or 行为异常。升级老项目时看到一片 import xxx require() 报错先检查 module 参数这是最常见的翻车原因。4.2 命名空间与模块什么时候用 namespace资料里有一句非常关键的话「模块里不要使用命名空间」。原因是 namespace 挂到全局作用域模块走局部作用域两者混在一起会形成双份作用域查找链变长编译产物也很怪。命名空间适合的场景是没有模块加载器、直接用多个 script 标签顺序引入的环境。比如资料里的验证器例子把一组验证函数收敛到一个 namespace 里避免污染 windownamespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } const lettersRegexp /^[a-zA-Z]$/; export class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } }逻辑说明namespace 里不带 export 的声明外部访问不到lettersRegexp 只有 Validation 内部能用这是 namespace 的封装边界。外部通过 Validation.LettersOnlyValidator 取到导出成员。参数说明多文件 namespace 靠三斜线指令关联写法是 /// 。这个语法在模块场景里是坏味道资料「命名空间和模块的陷阱」里专门点名对模块使用 /// 会让模块加载行为混乱正确姿势是直接 import。也就是说三斜线指令只保留给全局 script 场景用一旦项目用了 import/export就别再碰它。4.3 外部 JavaScript 库与 d.ts 的编写流程资料最后有一章「编写定义文件.d.ts」很多人跳过了但项目里引用老 JS 库时一定会碰上。d.ts 文件的流程其实很固定先看库暴露的是全局对象还是模块导出再决定用 declare namespace 还是 declare module。// 全局库暴露在 window 上的对象 declare namespace MyLib { function hello(name: string): void; }// 模块库通过 import 引入的 npm 包 declare module legacy-lib { export function hello(name: string): void; }逻辑说明declare namespace MyLib 声明了一个全局命名空间适合通过 script 标签引入的老库。declare module legacy-lib 是给 npm 包补类型壳import { hello } from legacy-lib 之后TS 会从这段声明里找类型。参数说明遇到没有任何 .d.ts 的老库正确顺序是先查类型声明社区仓库没有再自己补。自己在项目里新建一个 declarations.d.ts把用到的函数逐个声明出来。注意 declare module 里的导出接口要和你实际调用的 API 对齐——多写不会报错但会让类型检查失效少写会让你后续访问任何未声明的属性时报错。实际上这里最常见的习惯是先把用到的函数全部声明成 any 参数跑通后再逐步细化类型别一上来追求完美。5. 泛型、推导与兼容性五条高频避坑记录5.1 泛型约束失效extends 只约束类型参数不约束运行时现象写了 function f (x: T)以为传进来的东西一定是对象。结果 null 和 undefined 照样能传进去运行时一访问属性就崩。原因extends object 约束的是类型层面的边界不是运行时判断。如果 tsconfig 没开 strictNullChecksnull 可以赋值给任何类型就算开了T extends object 也不会自动排除 undefined。泛型约束管的是「你能传什么类型」管不了「运行时会传什么值」。解决在函数入口做一次显式检查或者把约束写得更严格function fT extends object(x: T) { if (x null) { throw new Error(x must not be null); } }逻辑说明这个问号判断把 null 和 undefined 一起拦住运行时防御。泛型约束适合限制类型范围但不能替代参数校验尤其是写对外 API 时。5.2 类型推导失灵什么时候必须显式标注现象map 回调里返回一个对象TS 推导出的字段类型比预期宽比如把 null 推导成 any后面过滤时怎么都报不对。原因上下文类型推导在三个场景里最容易出问题回调函数、泛型函数、复杂对象字面量。推导结果往往是宽泛的联合类型看起来没报错一用就错。解决不要迷信推导。凡是返回对象结构的函数显式写返回类型凡是暴露给其他模块的 API显式写参数和返回类型。内部实现的局部变量可以交给推导反正错了也只在局部。5.3 函数参数双向协变strictFunctionTypes 下的意外现象把 (x: Animal) void 的函数赋给 (x: Dog) void以为安全开启 strictFunctionTypes 后直接报错。原因开启 strictFunctionTypes 后函数参数是逆变检查。接受 Animal 的函数不能赋值给接受 Dog 的函数因为调用方可能传入更具体的 Dog而函数体里按 Animal 处理类型上就不安全。这个规则在旧版本 TS 里是双向协变的宽松检查新版本收紧了。解决回调签名里用具体类型不要用父类型兜底。如果确实需要通用的回调把参数声明为联合类型或者泛型别指望 Animal 兜住所有子类。5.4 枚举与数字字面量的兼容性误判现象enum Color { Red, Green }函数参数类型写 Color传入 1 不报错传入 2 就报错非常迷惑。原因数字枚举和 number 之间存在部分兼容枚举成员值可以被当作字面量类型使用但反向不成立。也就是说 Color 类型实际接受的是枚举成员的值不是任意数字。解决这种「枚举值当常量用」的场景直接用 const 对象加 as const 更干净。枚举留给真正需要命名常量和反向映射的地方。资料里枚举部分如果只讲了语法没讲这个坑一定要自己补上这条认知。5.5 泛型工具类型的误解keyof 和 typeof 的顺序现象想取一个类的所有属性名写 type Keys keyof MyClass 拿不到想要的集合改成 keyof typeof MyClass 才对。原因typeof MyClass 取的是类的静态类型也就是构造函数类型keyof 它拿的是静态成员名直接 keyof MyClass 拿的是实例成员名。如果类里没有实例属性只有方法keyof MyClass 拿到的是方法名不是属性名和预期差很远。解决先想清楚「我要的是值还是类型」。typeof 用在值上keyof 用在类型上连写 keyof typeof 就是把值先变成类型再取键名。这个顺序记牢能少踩一半泛型工具的坑。6. 最后一公里声明合并与 Symbol.iterator 的实战组合资料里的「声明合并」和「可迭代性」「Symbols」是三章独立的主题实际使用时经常组合出有用的技巧。比如给一个类补充可迭代能力让它可以被 for..of 消费同时不破坏原有结构class Range { constructor(public start: number, public end: number) {} } interface Range { [Symbol.iterator](): Iteratornumber; } Range.prototype[Symbol.iterator] function () { let current this.start; const end this.end; return { next(): IteratorResultnumber { if (current end) { return { value: current, done: false }; } return { value: undefined, done: true }; } }; };逻辑说明这里利用接口声明合并给 Range 类补上了 [Symbol.iterator] 的类型签名类的实现部分通过原型挂载真正的迭代器方法。声明合并让同一个类名同时拥有类实现和接口约束类负责逻辑接口负责类型描述两者互不污染。然后代码就能这样跑for (const n of new Range(1, 5)) { console.log(n); // 1 2 3 4 5 }逻辑说明for..of 走的是迭代器协议拿的是迭代器每次返回的 value。for..in 走的是属性枚举拿到的是属性名。资料里「for..of vs for..in」一节反复强调的就是这个区别for..in 用在数组上拿到的是字符串下标不是元素值这是经典翻车点。参数说明这种迭代器写法对 target 参数敏感。如果 tsconfig 里 target 是 ES5 或 ES3for..of 需要编译器生成迭代器辅助代码依赖 Symbol 相关 polyfill如果 target 是 ES2015 或更高原生支持迭代器不需要额外处理。资料里「代码生成」一节对这部分有专门说明。从那以后我遇到「对象不像数组但想被遍历」的需求第一反应就是声明合并加 Symbol.iterator而不是硬塞一个 toArray 方法。这个套路本身是通用的而且声明合并的边界恰好能保证类型和实现在同一个名字下不分离。希望帮到你。本文还有配套的精品资源点击获取
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
