重写 TypeScript 中的类方法

作者

在 TypeScript 中重写一个类方法

Override a Class method in TypeScript

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

索引.ts
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}`);

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

    return a * b;
  }
}

const child1 = new Child();

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

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

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

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

如果方法的类型不匹配，你会得到一个错误：

索引.ts
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
关键字。

索引.ts
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}`);

    // 👇️ this calls parent's doMath method
    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
关键字。

索引.ts
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()以执行父类的构造函数，然后才能this在Child.

–

发表评论