讲一下,ts中interface和type的继承怎么写的

在 TypeScript 中,interfacetype 都支持继承,但它们的使用场景和语法略有不同。以下是两者的继承方式及其区别。


1. interface 的继承

interface 是 TypeScript 中定义对象形状的主要方式,它支持通过 extends 关键字实现继承。

1.1 基本语法

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

interface Dog extends Animal {
  breed: string;
}

const dog: Dog = {
  name: "Buddy",
  age: 3,
  breed: "Golden Retriever",
};
  • Dog 继承了 Animal 的所有属性,并添加了新的属性 breed

1.2 多重继承

interface 支持多重继承,即一个接口可以继承多个接口。

typescript 复制代码
interface CanWalk {
  walk(): void;
}

interface CanBark {
  bark(): void;
}

interface Dog extends Animal, CanWalk, CanBark {
  breed: string;
}

const dog: Dog = {
  name: "Buddy",
  age: 3,
  breed: "Golden Retriever",
  walk() {
    console.log("Walking...");
  },
  bark() {
    console.log("Woof!");
  },
};
  • Dog 继承了 AnimalCanWalkCanBark 的所有属性和方法。

2. type 的继承

type 是 TypeScript 中定义类型别名的方式,它可以通过交叉类型(&)实现类似继承的效果。

2.1 基本语法

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

type Dog = Animal & {
  breed: string;
};

const dog: Dog = {
  name: "Buddy",
  age: 3,
  breed: "Golden Retriever",
};
  • Dog 通过交叉类型 & 继承了 Animal 的所有属性,并添加了新的属性 breed

2.2 多重继承

type 也可以通过交叉类型实现多重继承。

typescript 复制代码
type CanWalk = {
  walk(): void;
};

type CanBark = {
  bark(): void;
};

type Dog = Animal & CanWalk & CanBark & {
  breed: string;
};

const dog: Dog = {
  name: "Buddy",
  age: 3,
  breed: "Golden Retriever",
  walk() {
    console.log("Walking...");
  },
  bark() {
    console.log("Woof!");
  },
};
  • Dog 通过交叉类型 & 继承了 AnimalCanWalkCanBark 的所有属性和方法。

3. interfacetype 继承的区别

特性 interface type
语法 使用 extends 关键字 使用交叉类型 &
多重继承 支持多重继承 支持多重继承
扩展性 可以通过声明合并扩展 不能扩展,类型别名是静态的
适用场景 更适合定义对象的形状(如类、对象) 更适合定义复杂的类型(如联合类型、交叉类型)
可读性 更直观,适合面向对象编程 更灵活,适合函数式编程

4. 选择 interface 还是 type

  • 使用 interface 的场景

    • 定义对象的形状(如类、对象)。
    • 需要声明合并(例如扩展第三方库的类型)。
    • 需要更直观的面向对象编程风格。
  • 使用 type 的场景

    • 定义复杂的类型(如联合类型、交叉类型)。
    • 需要定义函数类型、元组类型等。
    • 需要更灵活的类型操作。

5. 示例对比

5.1 使用 interface

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

interface Dog extends Animal {
  breed: string;
}

const dog: Dog = {
  name: "Buddy",
  age: 3,
  breed: "Golden Retriever",
};

5.2 使用 type

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

type Dog = Animal & {
  breed: string;
};

const dog: Dog = {
  name: "Buddy",
  age: 3,
  breed: "Golden Retriever",
};

6. 总结

  • interface

    • 使用 extends 实现继承。
    • 支持声明合并,适合定义对象的形状。
    • 更适合面向对象编程。
  • type

    • 使用交叉类型 & 实现类似继承的效果。
    • 不支持声明合并,适合定义复杂类型。
    • 更适合函数式编程。

根据具体需求选择合适的工具,interfacetype 在 TypeScript 中各有优势,合理使用可以提高代码的可读性和可维护性。

相关推荐
像是套了虚弱散1 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追3 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构