TS中type与interface的区别

基本概念

接口 interface

在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约，接口除了能描述对象外，还能描述函数与事件。

类型别名 type

类型别名会给一个类型起个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。

不同点

定义范围

interface只能定义对象类型，或者函数事件等

type可以声明任何类型，包括基础类型，联合类型或交叉类型

// 基础类型
type Person = string;
// 联合类型
type Person = string | number
// 交叉类型
type Person = string & number

扩展性

interface能继承或者实现其他类与接口，实现扩展

type只能通过交叉类型或者联合类型实现扩展

// interface extends interface
interface User {
    name: string;
}
interface Person extends User {
    age: number;
}

// interface extends type
type User = {
    age: number;
}
interface Person extends User {
    name: string;
}

// type & type
type User = {
    age: number;
}
type Person = {name: string} & User;

// type & interface
interface User {
    age: number;
}
type Person = {name: string} & User;

接口的合并声明

定义两个相同名称的接口会合并声明，定义两个同名的 type 会出现异常。

// interface会自动进行合并
interface Person {
    name: string;
}
interface Person {
    age: number;
}
// 不能重复声明type,以下代码报错
type Person = {
    name: string;
}
type Person = {
    age: number;
}

type可以利用typeof

let div = document.createElement('div');
type myType = typeof div // HTMLDivElement