迹忆客 专注技术分享

要覆盖 TypeScript 中的类方法，需要从父类扩展并定义一个具有相同名称的方法。 请注意，参数的类型和方法的返回类型必须与父级的实现兼容。

class Parent {
  doMath(a: number, b: number): number {
    console.log(`result is: ${a + b}`);
    return a + b;
  }
}

class Child extends Parent {
  doMath(a: number, b: number): number {
    console.log(`result is ${a * b}`);

    // 👇️ 这会调用父级的 doMath 方法 super.doMath(a, b);
    return a * b;
  }
}

const child1 = new Child();

// 👇️ result is 100
child1.doMath(10, 10);

示例中的 Parent 类定义了一个 doMath 方法。 该方法接受 2 个 number 类型的参数并返回一个数字。

Child 类从 Parent 扩展并覆盖其 doMath 方法。

注意 ，Child 类中的 doMath 方法的类型必须符合 Parent 中方法的类型。

如果方法的类型不匹配，我们将收到错误消息，看下面的示例

class Parent {
  doMath(a: number, b: number): number {
    console.log(`result is: ${a + b}`);
    return a + b;
  }
}

class Child extends Parent {
  // ⛔️ Error: Property 'doMath' in type 'Child' is
  // not assignable to the same property in base type 'Parent'.
  doMath(a: string, b: string): string {
    return a * b;
  }
}

如果需要调用父方法的实现，使用 super 关键字。

class Parent {
  doMath(a: number, b: number): number {
    console.log(`result is: ${a + b}`);
    return a + b;
  }
}

class Child extends Parent {
  doMath(a: number, b: number): number {
    console.log(`result is ${a * b}`);

    // 👇️ 这会调用父类的 doMath 方法
    super.doMath(a, b);

    return a * b;
  }
}

const child1 = new Child();

// 👇️ result is 100
child1.doMath(10, 10);

// 👉️ parent's method logs `result is: 20`

super 关键字用于访问和调用对象父对象的方法。

当使用构造方法从类扩展时，必须先在子构造方法中调用 super()，然后才能使用 this 关键字。

class Parent {
  name = 'Parent';

  constructor(public a: number, public b: number) {
    this.a = a;
    this.b = b;
  }

  doMath(): number {
    console.log(`result is: ${this.a + this.b}`);
    return this.a + this.b;
  }
}

class Child extends Parent {
  name = 'Child';

  constructor(public a: number) {
    // 👇️ Call super here
    super(a, a);

    this.a = a;
  }

  doMath(): number {
    console.log(`result is ${this.a * this.a}`);

    // 👇️ this calls parent's doMath method
    super.doMath();

    return this.a * this.a;
  }
}

const child1 = new Child(100);

// 👇️ result is 10000
child1.doMath();

// 👉️ parent's method logs `result is: 200`

Child 类有一个构造方法，所以我们必须先调用 super() 来执行父类的构造方法，然后才能在 Child 中使用 this 关键字。