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方法。

我是菜逼,大佬勿喷!

相关推荐
右耳朵猫AI3 天前
Web前端周刊2026W38 | React 19.3 发布、StyleX 深潜、jsdom 30.1 提速
前端·javascript·react.js·typescript·node.js
溪语流沙4 天前
Django + Vue电商项目第001讲:开篇|注册登录加增删改查,那不是电商
redis·python·mysql·docker·typescript·django·vue
掰头战士4 天前
多重影分身!恨不得把一个agent掰成两个? 还真能干!
typescript·llm·agent
shmily麻瓜小菜鸡4 天前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript
雾隐隐o5 天前
TypeScript 基础:数据类型、接口与类型推论
typescript
flash俊杰5 天前
Zod Schema 驱动的 IPC 契约:从入参校验到状态机一致性的三层防御
javascript·typescript
愛芳芳6 天前
基于 Electron + Vue3 的仿 PC 微信客户端项目实战
前端·javascript·css·elementui·typescript·electron·vue
神秘的猪头6 天前
TypeScript 高级用法全解析:从泛型到 infer,把类型系统真正用起来
前端·typescript
FYKJ_20106 天前
【毕设分享】基于Web的校园兼职信息发布与申请系统07059
前端·vue.js·spring boot·mysql·typescript·spark·课程设计
ynchyong7 天前
TS 基础
typescript·ts