TypeScript中interface和type的差别是什么?

本文对比了TypeScript中的interface和type,阐述了它们在对象结构定义、扩展性、声明合并、类实现以及基本类型别名方面的差异,帮助开发者理解何时选择哪种方式来抽象类型。
摘要由CSDN通过智能技术生成


  在TypeScript中,interface和type都是定义类型的关键字,但它们在使用和行为上存在一些差异。理解这些差异对于在合适的场景中选择正确的抽象方式至关重要。

1. interface

  interface在TypeScript中主要用于定义对象的结构,它是一种方式来告诉编译器一个对象应该具有哪些形状。

interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Alice",
  age: 30
};

  在这个例子中,我们定义了一个Person接口,它要求实现的对象必须有两个属性:name(字符串类型)和age(数字类型)。

2. type

  type关键字用于定义更广泛的类型,不仅仅是对象结构。它可以用来给基本类型、联合类型、元组、函数等赋予一个新名字。

type PersonType = {
  name: string;
  age: number;
};

const user: PersonType = {
  name: "Alice",
  age: 30
};

  在这个例子中,我们使用type定义了一个PersonType类型别名,它与Person接口等效。

3. interface和type的差别

3.1. 扩展性

  • interface:可以被扩展(extends),允许多个接口合并到一个接口中。
  • type:没有扩展的概念,但可以使用交叉类型(&)来组合多个类型。

3.2. 声明合并

  • interface:当有两个相同的接口声明时,它们会合并。
  • type:相同的类型别名声明会导致编译错误。

3.3. 重新声明

  • interface:可以在不同的地方重复声明同一个接口,每次声明都会为接口添加额外的成员,这被称为声明合并。
  • type:重复的类型别名声明是不允许的。

3.4. 类实现

  • interface:类可以使用implements关键字来实现接口。
  • type:不能用于类的实现。
// 使用interface
interface Person {
  name: string;
}

interface Person {
  age: number; // 这会与上面的Person接口合并
}

class User implements Person {
  name: string;
  age: number;
}

// 使用type
type PersonType = {
  name: string;
};

// 下面的声明会导致错误,因为PersonType已经被声明过了
type PersonType = {
  age: number;
};

  在这个例子中,我们展示了如何使用interface和type来定义类型,并展示了声明合并和重新声明的差异。

3.5. 基本类型别名

  • interface:不能用于基本类型的别名声明。
  • type:可以用于基本类型、联合类型、元组、函数等的别名声明。
// 使用type定义基本类型的别名
type ID = string;

const id: ID = "123"; // 使用别名ID

// 使用type定义复杂的类型别名
type User = [string, number]; // 元组类型
type Callback = () => void; // 函数类型

  在这个例子中,我们使用type来定义基本类型、元组和函数的别名

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小新-alive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值