Ts interface 和 type 的区别？

前言

提示：刚学习TS 的新手看到type 和 interface 会分不清楚什么场景下怎么使用，所以写一篇文章总结一下

一、概念

type : 类型别名
概念：可以给一个或多个数据类型（string、number、…）取一个别名；
举例：
type dataType=number (给一个)
type dataType=number | string | turple

interface：接口
概念：定义参数或方法的数据类型；

二、两者的异同

1.相同点

都可以描述一个对象或者函数
interface

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

interface SetUser {
    (name: string, age: number): void;
}
1
2
3
4
5
6
7
8

type

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

type SetUser = (name: string, age: number): void;
1
2
3
4
5
6

2、interface和type都可以拓展，并且两者并不是互相独立的，也就是说interface可以extends type, type也可以extends interface. 虽然效果差不多，但是语法不同。

interface extends interface

interface Name {
    name: string;
}

interface User extends Name {
    age: number;
}
1
2
3
4
5
6
7

type 采用 & 进行拓展

type Name = {
    name: string;
}

type User = Name & { age: number }
1
2
3
4
5

interface extends type

type Name = {
    name: string;
}

interface User extends Name {
    age: number;
}
1
2
3
4
5
6
7

type extends interface

interface Name {
    name: string;
}

type User = Name & {
    age: number;
}
1
2
3
4
5
6
7

2.不同点

1 类型别名可以用于其它类型 （联合类型、元组类型、基本类型（原始值）），interface不支持

type PartialPointX = { x: number };
type PartialPointY = { y: number };

// union(联合)
type PartialPoint = PartialPointX | PartialPointY;

// tuple(元祖)
type Data = [PartialPointX, PartialPointY];

//primitive(原始值)
type Name = Number;

// typeof的返回值
let div = document.createElement('div');
type B = typeof div;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2 interface 可以多次定义 并被视为合并所有声明成员 type 不支持

interface Point {
  x: number;
}
interface Point {
  y: number;
}

const point: Point = { x: 1, y: 2 };
```c
interface User {
    name: string;
    age: number;
}

interface User {
    sex: string;
}
//User接口为：
{
    name: string;
    age: number;
    sex: string;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3 type 能使用 in 关键字生成映射类型，但 interface 不行。

type Keys = 'firstname' | 'surname';

type DudeType = {
  [key in Keys]: string;
};

const test: DudeType = {
  firstname: 'Pawel',
  surname: 'Grzybek',
};
1
2
3
4
5
6
7
8
9
10

4 默认导出方式不同

// inerface 支持同时声明，默认导出 而type必须先声明后导出
export default interface Config {
  name: string;
}
// 同一个js模块只能存在一个默认导出哦
type Config2 = {name: string}
export default Config2
1
2
3
4
5
6
7

type其他骚操作

type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = [T, T];
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
1
2
3
4
5
6
7

一般来说，能用interface实现，就用interface，如果不能就用type、欢迎补充