抽象类与 implements

  1// 抽象类与 interface 的分工
  2
  3// ---- interface：纯类型契约，无实现 ----
  4interface Serializable {
  5  serialize(): string;
  6}
  7
  8// interface 可以有可选成员和只读成员
  9interface Config {
 10  readonly name: string;
 11  debug?: boolean;
 12}
 13
 14// ---- 抽象类：部分实现 + 强制子类实现部分 ----
 15abstract class Shape {
 16  // 抽象成员：子类必须实现
 17  abstract area(): number;
 18  abstract readonly kind: string;
 19
 20  // 已实现成员：子类继承
 21  describe(): string {
 22    return `${this.kind}: ${this.area().toFixed(2)}`;
 23  }
 24
 25  // 模板方法：定义流程，子类填细节
 26  report(): string {
 27    return `[${this.describe()}]`;
 28  }
 29
 30  // 抽象类可以有构造函数和状态
 31  protected label: string;
 32  constructor(label: string) {
 33    this.label = label;
 34  }
 35}
 36
 37class Circle extends Shape {
 38  readonly kind = "circle";
 39  constructor(private radius: number) { super("circle"); }
 40  area(): number { return Math.PI * this.radius ** 2; }
 41}
 42
 43// ---- 一个类可以 implements 多个 interface，但只能 extends 一个类 ----
 44interface Named { name: string }
 45interface Aged { age: number }
 46
 47class Person implements Named, Aged {
 48  constructor(public name: string, public age: number) {}
 49}
 50
 51// ---- implements 只检查形状，不继承实现 ----
 52class Version implements Serializable {
 53  constructor(private major: number) {}
 54  serialize(): string { return String(this.major); }
 55}
 56// 必须自己实现 serialize，implements 不给任何实现
 57
 58// ---- 抽象类也可以 implements interface ----
 59abstract class BaseEntity implements Serializable {
 60  abstract serialize(): string;      // 声明为抽象，交给子类
 61  id = 0;
 62}
 63
 64class UserEntity extends BaseEntity {
 65  serialize(): string { return JSON.stringify({ id: this.id }); }
 66}
 67
 68// ---- 抽象类的实例侧与静态侧 ----
 69abstract class Factory {
 70  abstract create(): string;
 71  static registry: string[] = [];
 72}
 73// 静态成员可以正常访问
 74Factory.registry.push("a");
 75// @ts-expect-error TS2511: Cannot create an instance of an abstract class.
 76new Factory();
 77
 78// ---- 选择标准 ----
 79// 用 interface：只要契约，多个类要共享形状，需要多实现
 80// 用抽象类：需要共享实现、需要 protected 成员、需要模板方法
 81
 82// ---- 混合：抽象类 + interface 组合 ----
 83interface Drawable { draw(): string }
 84abstract class Renderer {
 85  abstract render(target: Drawable): string;
 86  log(msg: string): string { return `[log] ${msg}`; }
 87}
 88class SvgRenderer extends Renderer {
 89  render(target: Drawable): string {
 90    return this.log(target.draw());
 91  }
 92}
 93
 94// ---- 抽象类的 protected 成员不能被外部访问 ----
 95class Sub extends Shape {
 96  readonly kind = "sub";
 97  area(): number { return 1; }
 98  readLabel(): string { return this.label; }    // ✓ protected 可被子类访问
 99}
100
101const shapes: Shape[] = [new Circle(1), new Sub("s")];
102console.log(shapes.map((s) => s.report()));
103console.log(new Person("a", 1), new Version(1).serialize(), new UserEntity().serialize());
104console.log(new SvgRenderer().render({ draw: () => "svg" }), new Sub("x").readLabel());
105console.log(Factory.registry);

1[ '[circle: 3.14]', '[sub: 1.00]' ]
2Person { name: 'a', age: 1 } 1 {"id":0}
3[log] svg x
4[ 'a' ]

1abstract class Factory {
2  abstract create(): string;
3}
4
5new Factory();
6// error TS2511: Cannot create an instance of an abstract class.

 1abstract class Shape {
 2  abstract area(): number;
 3  abstract readonly kind: string;
 4
 5  // 已实现：子类继承
 6  describe(): string {
 7    return `${this.kind}: ${this.area().toFixed(2)}`;
 8  }
 9
10  // 模板方法：定义流程，调用抽象成员
11  report(): string {
12    return `[${this.describe()}]`;
13  }
14}

1interface Serializable {
2  serialize(): string;
3}
4
5class Version implements Serializable {
6  serialize(): string { return String(this.major); }   // 必须自己实现
7}

 1// ✓ 可以实现多个接口
 2class Person implements Named, Aged {
 3  constructor(public name: string, public age: number) {}
 4}
 5
 6// ✓ 抽象类也可以 implements
 7abstract class BaseEntity implements Serializable {
 8  abstract serialize(): string;    // 声明为抽象，交给子类
 9  id = 0;
10}
11
12// ✗ 只能继承一个类
13// class X extends A, B {}

1interface Combined extends Named, Aged {}

 1abstract class Shape {
 2  protected label: string;
 3  constructor(label: string) { this.label = label; }
 4}
 5
 6class Sub extends Shape {
 7  readLabel(): string { return this.label; }    // ✓ 子类可访问
 8}
 9
10new Sub("x").label;
11// error TS2445: Property 'label' is protected and only accessible within class
12// 'Shape' and its subclasses.

 1interface Drawable { draw(): string }
 2
 3abstract class Renderer {
 4  abstract render(target: Drawable): string;
 5  log(msg: string): string { return `[log] ${msg}`; }
 6}
 7
 8class SvgRenderer extends Renderer {
 9  render(target: Drawable): string {
10    return this.log(target.draw());     // 复用了父类的 log
11  }
12}