前言

在前端项目中，经常会使用到TypeScript，在使用TypeScript时，经常搞不清type和interface之间的区别。

type

类型别名type可以用来给一个类型起一个新的名字，当命名基本类型或联合类型等非对象类型时非常有用

type MyNumber = number;
type StringOrNumber = string | number;
type Text = string | string[];
type Point = [number, number];
type Callback = (data: string) => void;

在TypeScript1.6版本中，类型别名开始支持泛型。我们工作中常用的Partial,Required,Pick,Record和Exclude等工具类都是以type方式来定义的。

type Partial<T> = {
    [p in keyof T]?: T[p]; 
};

type Required<T> = {
    [p in keyof T] ?: T[p];
};

type Pick<T, K extentds keyof T> = {
    [p in K] : T[p]
};

type Record<K extends keyof any, T> = {
    [p in K] : T
};

type Exclude<T,U> = Textends U ? never : T;

interface

interface只能用于定义对象类型，Vue3中的App对象就是使用interface来定义的：

export interface App<HostElement = any>{
    version: string
    config: AppConfig  
    use(plugin: Plugin, ...option: any[]): this
    mixin(mixin: ComponentOptions): this  
    component(name: string): Component | undefined // Getter
    component(name: string, component: Component): this //Setter
    directive(name: string): Directive | undefined
    direvtive(name: string, directive: Directive): this
}

由以上代码可知，在定义接口时，我们可以同时声明对象类型上的属性和方法。

相同之处

类型别名和接口都可以用来描述对象或函数

类型别名

type Point = {
    x: number;
    y: number;
};

type SetPoint = (x: number, y: number) => void;

在以上代码中，我们通过type关键字为对象字面量类型和函数类型分别取了一个别名，从而方便在其他地方使用这些类型。

接口

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

interface SetPoint {
    (x: number, y: number): void;
}

类型别名和接口都支持扩展

类型别名通过&（交叉运算符）来拓展，而接口通过extends的方式来扩展。

类型别名扩展

type Animal = {
    name: string
}

type Bear = Animal & {
    honey: boolean
}

const bear : Bear = getBear()
bear.name
bear.honey

接口扩展

interface Animal {
    name: string
}

interface Bear extends Animal {
    honey: boolean
}

此外，接口也可以通过extends来扩展类型别名定义的类型：

type Animal = {
    name: string
}

interface Bear extends Animal {
    honey: boolean
}

同时，类型别名也可以通过&（交叉运算符）来扩展已定义的接口类型：

interface Animal {
    name: string
}

type Bear = Animal & {
    honey: boolean
}

不同之处

类型别名可以为基本类型，联合类型或元祖类型定义别名而接口不行

type MyNumber = number;
type StringOrNumber = string | number;
type Point = [number, number];

同名接口会自动合并而类型别名不会

同名接口合并

interface User {
    name: string;
}

interface User {
    id: number
}

let user: User = {id: 666, name: "zzz"};
user.id; // 666
user.name; // "zzz"

同名类型别名会冲突

type User = {
    name: string;
};

// 标识符“User”重复
type User = {
    id: number;
}

利用同名接口自动合并的特性，在开发第三方库的时候，我们就可以为使用者提供更好的安全保障。比如webext-bridge这个库，使用interface定义了ProtocolMap接口，从而让使用者可自由地扩展ProtocolMap接口。之后，在利用该库内部提供的onMessage函数监听自定义消息时，我们就可以推断出不同消息对应的消息体类型。

总结

使用类型别名的场景：

定义基本类型的别名时，使用type
定义元祖类型时，使用type
定义函数类型时，使用type
定义联合类型时，使用type
定义映射类型时，使用type

使用接口的场景：

需要利用接口自动合并特性的时候，使用interface
定义对象类型且无需使用type的时候，使用interface

TypeScript type和interface的区别

前言