TypeScript 中 extends 关键字

基础概念与语法介绍

extends关键字主要用于类、接口和泛型中,分别实现继承扩展约束功能。在类中,它允许一个类继承另一个类的属性和方法;在接口定义中,他用于合并接口,形成一个包含所有指定接口成员的新接口;而在泛型中,extends用于限制类型变量必须符合某种类型结构,增加了泛型的灵活性和类型的安全性。

类的继承

类的继承是面向对象编程的基本特征之一,extends在此发挥了核心作用。通过继承、子类可以复用父类的属性和方法,同时可选择性的覆盖或扩展他们

typescript 复制代码
class Animal {
  name: string;

  constructor(name: string){
    this.name = name;
  }

  speak(){
    console.log(`${this.name} is Animal`)
  }
}

class Dog extends Animal {
  speak(){
    console.log(`${this.name} Dog`)
  }
}

在这个例子中,Dog类通过extends继承了Animal类,并覆盖了speak方法以提供更具体的实现。

接口的扩展

接口扩展是TypeScript中实现接口复用组合的强大机制。利用extends,可以创建一个接口,它包含一个或多个其他接口所有成员。

基本接口扩展

假设你有两个基本接口,一个描述了动物的一般特征,另一个专门描述了鸟类的特征。

typescript 复制代码
interface Animal {
    name: string;
    age: number;
}

interface Brid extends Animal {
    fly(): void;
    sing(): string;
}

let brid: Brid = {
    name: 'zyj',
    age: 1,
    fly() {
        console.log('fly');
    },
    sing() {
        return 'sing'
    }
}

在这里,Bird接口通过extends关键字扩展了Animal接口,这就意味着一个实现了Brid接口的对象除了需要有flysing方法还必须有nameage属性。

多接口扩展

有时候一个类或接口可能需要符合多个接口的规范。TypeScript支持多重继承,即一个接口可以扩展多个其他接口。

typescript 复制代码
interface Swinmer {
    swim(): void;
}

interface Flyer {
    fly(): void;
}

interface Duck extends Swinmer, Flyer {
    quack(): void;
}

let duck: Duck = {
    swim() {
        console.log('swim')
    },
    fly() {
        console.log('fly')
    },
    quack() {
        console.log('quack')
    },
}

在上面的例子中,Duck接口通过扩展SwimmerFlyer接口,要求实现了Duck的类型还需要有swimfly方法,以及自己的quack方法。

泛型接口与扩展

接口扩展也可以与泛型一起使用,为泛型类型增加更多约束或行为。

typescript 复制代码
interface Loggable<T> {
    log(message: T): void;
}

interface Identifiable<T> {
    id: T;
}

interface User extends Identifiable<number>, Loggable<string> {
    name: string;
    email: string;
}

const user: User = {
    id: 1,
    name: 'zyj',
    email: '123@qq.com',
    log(message: string) {
        console.log(message)
    }
}

在这个例子中,User接口不仅有自己的属性nameemail,还通过扩展Identifiable<number>获得了id属性,并且通过扩展Loggable<string>要求有一个接受字符串参数的log方法。

我是菜逼,大佬勿喷!

相关推荐
mez_Blog3 小时前
个人小结(2.0)
前端·javascript·vue.js·学习·typescript
QGC二次开发6 小时前
Vue3 : Pinia的性质与作用
前端·javascript·vue.js·typescript·前端框架·vue
2301_801074158 小时前
TypeScript异常处理
前端·javascript·typescript
下雪天的夏风11 小时前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
天下无贼!1 天前
2024年最新版TypeScript学习笔记——泛型、接口、枚举、自定义类型等知识点
前端·javascript·vue.js·笔记·学习·typescript·html
Jorah3 天前
1. TypeScript基本语法
javascript·ubuntu·typescript
小白小白从不日白4 天前
TS axios封装
前端·typescript
aimmon4 天前
Superset二次开发之源码DependencyList.tsx 分析
前端·typescript·二次开发·bi·superset
下雪天的夏风5 天前
Vant 按需引入导致 Typescript,eslint 报错问题
前端·typescript·eslint