TS 中 interface 与 type 的区别


字数:368 阅读时长:1分钟 阅读:85

在 TypeScript 中,interface 和 type 都可以用来定义一个数据的类型,那么它们有什么区别呢?

TypeScript

一、interface 接口类型

interface 是一种用来声明对象类型的方式:

1
2
3
4
5
6
7
8
9
interface Person {
name: string;
age: number;
}

const person: Person = {
name: 'tiven',
age: 18,
};

可以使用 extends 关键字对 interface 进行继承:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface Person {
name: string;
age: number;
}

interface Student extends Person {
grade: number;
}

const student: Student = {
name: 'tiven',
age: 18,
grade: 1,
};

二、type 类型别名

在 ts 里,我们可以使用 type 关键词来给任意类型添加命名,这样可以方便引用和复用:

1
2
3
4
5
6
7
8
9
type Person = {
name: string;
age: number;
};

const person: Person = {
name: 'tiven',
age: 18,
};

使用 & 符号将多个 type 进行组合:

1
2
3
4
5
6
7
8
9
10
type Person = {
name: string;
age: number;
};

type Student = {
grade: number;
};

type StudentPerson = Person & Student;

使用 | 符号将多个常量组成 union 联合类型:

1
2
3
type Status = 'success' | 'error' | 'warning';

const status: Status = 'success';

三、interface 和 type 的区别

  1. interface 的重复声明可以合并,type 不能重复声明:
1
2
3
4
5
6
7
8
9
10
11
12
13
interface Person {
name: string;
age: number;
}

interface Person {
grade: number;
}

type Person = { // ❌ Error: type 不能重复声明
name: string;
age: number;
}
  1. interface 只能声明对象类型,但 type 除了对象类型以外,还可以声明简单类型和 union 联合类型
  2. type 通过 & 符号进行类型合并,而 interface 通过 extends 关键词实现继承

参考文档:https://mp.weixin.qq.com/s/3myeGg0A8yUq4E04gXzREA


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2023-08-03
最后更新: 2024-03-28
本文标题: TS 中 interface 与 type 的区别
本文链接: https://www.tiven.cn/p/ff052d0f/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!