在现代 JavaScript 开发中，类（Class）是面向对象编程（OOP）的核心概念之一。ES6（ECMAScript 2015）引入了基于原型的类的语法糖，而 TypeScript 在兼容 ES6 类的基础上，通过静态类型系统和额外特性进一步增强了类的功能。
本文将深入探讨 TypeScript 类与 ES6 类的区别，涵盖类型系统、访问控制、抽象类、接口实现、装饰器等关键特性，并分析它们在实际开发中的应用场景和最佳实践。
1. ES6 类的基本语法
ES6 类提供了一种更接近传统面向对象语言的语法，但其底层仍然是基于 JavaScript 的原型继承。
1.1 ES6 类的定义
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, ${this.name}!`;
}
}
const alice = new Person("Alice", 25);
console.log(alice.greet()); // "Hello, Alice!"特点：
使用
class关键字定义类。constructor方法用于初始化实例。方法直接定义在类内部（最终仍挂载到原型上）。
没有类型系统，所有成员都是动态类型。
1.2 ES6 类的局限性
没有类型检查：无法在编译时检测属性或方法的类型错误。
访问控制较弱：ES6 默认所有成员都是
public，私有成员需要使用#语法（ES2022+）。缺少高级 OOP 特性：如抽象类、接口、泛型等。
2. TypeScript 类的增强特性
TypeScript 在 ES6 类的基础上引入了静态类型系统和更多面向对象特性，使代码更健壮、可维护。
2.1 类型注解（Type Annotations）
TypeScript 允许为类的属性、方法参数和返回值添加类型注解：
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet(): string {
return `Hello, ${this.name}`;
}
}
const bob = new Person("Bob", 30);
console.log(bob.greet()); // "Hello, Bob"优势：
编译时类型检查，避免运行时错误。
更好的 IDE 智能提示和代码补全。
2.2 访问修饰符（Access Modifiers）
TypeScript 提供 public、private 和 protected 修饰符，增强封装性：
class Animal {
public name: string; // 默认，可省略
private secret: string; // 仅当前类可访问
protected age: number; // 当前类及子类可访问
constructor(name: string, secret: string, age: number) {
this.name = name;
this.secret = secret;
this.age = age;
}
}
class Dog extends Animal {
bark() {
console.log(`${this.name} is barking!`); // ✅ name 可访问
console.log(this.age); // ✅ age 可访问（protected）
console.log(this.secret); // ❌ 错误：secret 是私有的
}
}对比 ES6：
ES6 使用
#定义私有字段：class Animal { #secret; constructor(secret) { this.#secret = secret; } }TypeScript 的
private在编译后会移除，而 ES6 的#是真正的私有字段（运行时强制封装）。
2.3 抽象类（Abstract Classes）
TypeScript 支持抽象类和抽象方法，强制子类实现特定逻辑：
abstract class Shape {
abstract getArea(): number; // 抽象方法，子类必须实现
printArea() {
console.log(`Area: ${this.getArea()}`);
}
}
class Circle extends Shape {
constructor(private radius: number) {
super();
}
getArea(): number {
return Math.PI * this.radius ** 2;
}
}
const circle = new Circle(5);
circle.printArea(); // "Area: 78.53981633974483"ES6 无此功能，必须通过文档或运行时检查模拟。
2.4 接口实现（Interface Implementation）
TypeScript 类可以通过 implements 实现接口：
interface Loggable {
log(): void;
}
class Logger implements Loggable {
log() {
console.log("Logged!");
}
}优势：
强制类遵循特定结构，提高代码可维护性。
支持多接口实现：
class User implements Serializable, Validatable { ... }2.5 只读属性（Readonly Properties）
TypeScript 提供 readonly 修饰符，防止属性被修改：
class Config {
readonly apiUrl = "https://api.example.com";
}
const config = new Config();
config.apiUrl = "new-url"; // ❌ 错误：无法修改只读属性ES6 替代方案：使用 Object.defineProperty 或 # 私有字段。
2.6 参数属性（Parameter Properties）
TypeScript 允许在构造函数参数中直接定义成员：
class Point {
constructor(public x: number, public y: number) {}
}
// 等价于：
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}优势：减少样板代码，提高可读性。
2.7 装饰器（Decorators）
TypeScript 支持实验性装饰器（需配置 experimentalDecorators）：
@sealed
class Greeter {
@log
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@bind
greet() {
return `Hello, ${this.greeting}`;
}
}应用场景：
日志记录（
@log）依赖注入（Angular、NestJS）
自动绑定
this（@bind）
ES6 装饰器仍处于提案阶段（Stage 3），需通过 Babel 使用。
2.8 泛型类（Generic Classes）
TypeScript 支持泛型类，提高代码复用性：
class Box<T> {
content: T;
constructor(value: T) {
this.content = value;
}
}
const numberBox = new Box<number>(42);
const stringBox = new Box<string>("Hello");ES6 无泛型，需手动处理类型。
3. 编译与运行时行为对比
| 特性 | TypeScript 类 | ES6 类 |
|---|---|---|
| 类型检查 | 编译时 | 无（运行时可能报错） |
| 私有成员 | 编译后移除（仅静态检查） | # 语法（运行时强制） |
| 抽象类 | 编译时检查 | 不支持 |
| 装饰器 | 实验性支持 | 需 Babel 转译 |
| 目标代码 | 可编译为 ES5/ES6+ | 需现代环境或转译 |
4. 最佳实践
4.1 何时使用 TypeScript 类？
需要类型安全和静态检查。
需要接口、抽象类等高级 OOP 特性。
项目使用 Angular、NestJS 等基于装饰器的框架。
4.2 何时使用 ES6 类？
纯 JavaScript 项目（无 TypeScript 工具链）。
需要真正的运行时私有字段（
#）。目标环境直接支持 ES6+。
5. 总结
TypeScript 类在 ES6 类的基础上，通过类型系统、访问控制、抽象类、接口、泛型等特性，显著提升了代码的健壮性和可维护性。尽管 ES6 类更接近原生 JavaScript，但在大型项目中，TypeScript 的静态类型检查和 OOP 增强功能使其成为更优选择。
推荐组合使用：
使用 TypeScript 开发核心业务逻辑。
在需要严格封装时，结合 ES6
#私有字段。利用装饰器简化框架集成（如 Angular/NestJS）。
希望本文能帮助你更好地理解 TypeScript 和 ES6 类的区别，并在实际开发中做出合理选择！