讲一下,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 中各有优势,合理使用可以提高代码的可读性和可维护性。

相关推荐
Cao_Ron8 分钟前
用 SVG image symbol 画 ECharts graph 圆形节点
前端
hxy060113 分钟前
React-Call让你的React组件像异步函数一样调用
前端·react.js
Hilaku14 分钟前
为什么 AI 写前端时,总是优先选择 React,而不是 Vue?
前端·javascript·程序员
京东云开发者16 分钟前
GPT-5.6、ChatGPT Work 与 Codex 更新食用指南
前端
Cao_Ron27 分钟前
用 ECharts graph 画出卡片式矩形节点
前端
skiyee36 分钟前
换个底座的 Wot Starter 居然让 AI 更懂项目!
前端·ai编程
anyup42 分钟前
这一套绝了!AI 大模型写故事,星云 SDK 驱动 3D 数字人实时演绎
前端·人工智能·aigc
耀耀切克闹灬1 小时前
短链跳转
前端
孟陬1 小时前
高质量全方位的 AI 工具 sse-stuntman — Mock SSE 接口
前端·node.js·openai
Cao_Ron1 小时前
给 ECharts 6 graph 节点叠加角标:从原理到性能优化
前端