TypeScript 中如何使用 extends-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一个强类型的 JavaScript 超集，它扩展了原始 JavaScript 语言，为我们提供了更加健壮的类型检查以及更好的代码重用机制。其中，类型继承是 TypeScript 中非常重要的特性之一，可以帮助我们实现类之间的代码复用，提高代码的可维护性。

在 TypeScript 中，我们可以使用 extends 关键字来实现类的继承，其语法为：

class ChildClassName extends ParentClassName {
  // 子类继承的属性和方法
}

extends 继承语法中，ChildClassName 表示子类的名称，ParentClassName 表示父类的名称。子类中可以通过 super() 方法来调用父类的构造函数以及父类中的属性和方法。

继承父类的属性和方法

我们可以通过继承父类的属性和方法，在子类中实现更多的逻辑。下面是一个示例代码：

class Animal {
  constructor(public name: string) {}

  move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`Woof! Woof!`);
  }
}

const dog = new Dog('Buddy');
dog.move(10); // 'Buddy moved 10m.'
dog.bark();   // 'Woof! Woof!'

在上面的代码中，Animal 是一个包含 name 属性和 move() 方法的类，我们可以通过创建 Dog 类并继承 Animal 类来实现更多的逻辑。在子类 Dog 中，我们新增了一个 bark() 方法。通过 extends 关键字，Dog 类可以获取到 Animal 类中的 name 属性和 move() 方法，并在此基础上扩展自己的逻辑。

父类的构造函数

在 TypeScript 中，如果一个子类中实现了 constructor() 方法，则它必须调用 super() 方法去调用父类的构造函数。因为父类中声明的属性和方法需要在子类中使用，而这些属性和方法需要在调用父类构造函数后才能正确初始化。

下面是一个示例代码：

class Animal {
  constructor(public name: string) {}
}

class Dog extends Animal {
  constructor(public breed: string, name: string) {
    super(name);
  }
}

const dog = new Dog('Poodle', 'Buddy');
console.log(dog.name);   // 'Buddy'
console.log(dog.breed);  // 'Poodle'

在这个例子中，我们创建了一个 Dog 子类，它包含一个 breed 属性和一个构造函数，用来初始化 breed 属性和调用 super() 方法以获取 name 属性。在 Dog 中，我们通过 constructor(public breed: string, name: string) 来定义了其构造函数，其中 public 关键字会自动将参数变为类属性。在 Dog 的构造函数中，super(name) 方法用于调用父类的构造函数来初始化父类的 name 属性。

多重继承

通过 TypeScript 中的 extends 关键字，我们可以实现多重继承，即子类可以同时从多个父类中继承属性和方法。在这种情况下，我们可以使用逗号分隔多个父类的名称，如下所示：

class A {
  sayHi() {
    console.log('Hi from A');
  }
}

class B {
  sayHi() {
    console.log('Hi from B');
  }
}

class C extends A, B {
  sayHello() {
    console.log('Hello from C');
  }
}

const c = new C();
c.sayHi();     // 'Hi from A'
c.sayHello();  // 'Hello from C'

在这个例子中，我们创建了一个名为 C 的子类，并从 A 和 B 两个父类中继承了 sayHi() 方法。在 C 的实例 c 中，我们可以调用 sayHi() 方法输出 'Hi from A'，但是对于 B 中的 sayHi() 方法则不会被调用。同时，我们也可以调用 C 子类的 sayHello() 方法输出 'Hello from C'。

总结

在 TypeScript 中，使用 extends 关键字可以帮助我们轻松地实现类之间的代码复用，并在此基础上实现更多的逻辑。通过继承父类的属性和方法，我们可以减少重复的代码，提高代码的可维护性和可扩展性。同时，多重继承可以进一步扩展代码的复用范围，并降低开发成本。在写 TypeScript 代码的过程中，我们应该根据实际场景灵活运用继承语法，以实现更高效、更优雅的代码编写。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a8a98cadd4f0e0ff1d496c

TypeScript 中如何使用 extends

继承父类的属性和方法

父类的构造函数

多重继承

总结

纠错反馈