TypeScript 类完全指南TypeScript-New-Handbook 从继承到 this 管理【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-HandbookTypeScript 类class是前端与后端开发者都绕不开的核心语法它把 ES2015 的类机制与类型系统结合在一起让面向对象编程变得更安全、更可维护。本文将基于官方孵化手册TypeScript-New-Handbook的 Classes 章节为你系统梳理 TypeScript 类继承、成员可见性、抽象类与 this 管理的完整知识即使你刚接触 TypeScript也能轻松上手。为什么 TypeScript 类值得系统学习JavaScript 的类本身就有不少怪脾气比如this的指向问题、构造函数的初始化顺序等。TypeScript 在保留原有运行机制的基础上增加了类型注解、可见性修饰符、抽象类等能力把很多运行时才能暴露的错误提前到编译阶段。TypeScript-New-Handbook 是微软团队编写的新版手册其中 chapters/Classes.md 一章用通俗语言 大量可运行示例把类的方方面面讲得清清楚楚非常值得当作入门教材反复翻阅。TypeScript 类基础成员字段、构造函数与方法字段声明与类型推断在类中声明字段field可以直接标注类型也可以省略类型让 TypeScript 根据初始化值自动推断class Point { x: number; y 0; // 类型自动推断为 number }如果你开启了strictPropertyInitialization未在构造函数中初始化的字段会直接报错这时可以用!断言操作符声明我一定会初始化它。此外readonly修饰符可以防止字段在构造函数之外被重新赋值。构造函数与 super 调用构造函数与普通函数非常相似支持默认参数、重载但有两点差异不能写类型参数也不能写返回类型注解。当类存在基类时在构造函数里使用this之前必须先调用super()否则 TypeScript 会给出错误提示——这个检查能帮你避开 JavaScript 里最常见的坑class Base { k 4; } class Derived extends Base { constructor() { console.log(this.k); // 错误必须先调用 super() super(); } }方法、getter 与 setter方法体内访问字段必须使用this.前缀否则会引用到外层作用域的变量。类还支持 getter/setter 访问器注意只有 getter 没有 setter 的属性会被自动视为readonly。TypeScript 类继承extends 与 implementsextends 继承基类使用extends可以继承基类的全部属性和方法子类还能重写override基类方法并通过super.调用基类实现。TypeScript 强制要求派生类始终是基类的子类型这意味着重写方法时参数不能比基类更苛刻否则通过基类引用调用时会直接崩溃class Base { greet() { console.log(Hello, world!); } } class Derived extends Base { greet(name?: string) { if (name undefined) { super.greet(); } else { console.log(Hello, ${name}); } } }初始化顺序最容易踩坑JavaScript 类的初始化顺序是固定的先初始化基类字段 → 执行基类构造函数 → 再初始化派生类字段 → 执行派生类构造函数。所以基类构造函数里访问到的name是自己的值而不是子类覆盖后的值。理解这个顺序能避免很多结果和直觉不符的诡异 bug。implements 只做检查不改类型implements用于检查类是否满足某个interface的约定但它不会改变类的类型推断。比如接口中方法参数标注了string实现类里写s依然会被推断为隐式any接口的可选属性也不会自动出现在类上。记住这一点就不会对implements产生误解。成员可见性public、protected、privateTypeScript 提供了三级可见性控制修饰符类内访问子类访问外部访问public默认✅✅✅protected✅✅❌private✅❌❌几个细节值得注意派生类可以把protected成员提升为public但若无意暴露记得重复写protectedTypeScript 允许同类不同实例互相访问private成员更重要的是private/protected只在编译期生效运行时通过属性查找依然能拿到值真正需要硬保护时应使用闭包、WeakMap 或原生#私有字段。抽象类与泛型类面向对象的进阶利器抽象类abstract class不能直接实例化只能作为基类使用子类必须实现其中的抽象方法或抽象字段abstract class Base { abstract getName(): string; printName() { console.log(Hello, this.getName()); } } class Derived extends Base { getName() { return world; } }泛型类则允许用类型参数把内容类型抽象出来如class BoxT实例化时类型参数会自动推断。注意泛型类的static成员永远不能引用类型参数因为运行时只存在一个静态属性槽位。this 管理箭头函数与 this 参数JavaScript 中this的值取决于函数如何被调用把方法从对象上拆下来单独调用时this就会丢失。TypeScript 提供了两种优雅的解决方案箭头函数属性getName () this.name保证运行时this永远正确但每个实例都会多一份函数拷贝且无法用super调用基类方法this 参数getName(this: MyClass)在编译期强制检查调用上下文只分配一份函数且支持super.但 JS 调用方仍可能在运行时出错。两种方案各有取舍根据场景二选一即可。this 类型让链式调用更聪明在类的方法返回值上TypeScript 会推断出动态的this类型而非固定的类名。这意味着子类调用set()后返回的是子类实例链式调用时不会丢失子类的类型信息配合sameAs(other: this)这类参数还能限制方法只接受同类型实例非常实用。结合官方手册的完整学习路径想系统掌握全部知识点直接研读 chapters/Classes.md共约 1171 行含大量可运行示例想总览全局知识结构可查看 meta/OUTLINE.md 与 structure.json想了解整本手册的写作规范与阅读方式参考 meta/AUTHORING.md本地体验完整教程可运行npm run start启动开发服务器或直接阅读渲染后的 docs/chapters/classes/index.html。如果你希望克隆仓库亲手实践仓库地址为https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook。从字段、构造函数这些基础成员到继承、可见性、抽象类再到最让人头疼的 this 管理掌握好这条主线你的 TypeScript 面向对象编程就能快速进入实战状态。【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考