interface 和 type

在我们项目开发过程中，到底应该使用type还是interface，相信看完下面介绍，你完全可以搞清楚

interface

interface（接口）用来定义对象类型的，对对象中的属性分别定义。

interface Children {
    name: string,
    age: number
}

const children: Children = {
    name: 'zhang',
    age: 18
}

type

type（类型别名），类型别名会给一个类型起个新名字。主要作用于原始值、联合类型、交叉类型、元组以及其它任何你需要手写的类型。

type Name = string;  // 基本类型
type NameResolver = () => string;  
type NameOrResolver = Name | NameResolver;  // 联合类型
function getName(n: NameOrResolver) {
    if (typeof n === 'string') {
        return n;
    }
    else {
        return n();
    }
}

两者相同点

都可以定义一个对象或者函数

都允许继承

interface继承（使用extends）

interface Parent {
    name: string
}
interface Children extends Parent {
    age: number
}
// Children 类型为{name: string, age: number};

type继承（使用交叉类型）

type Parent {
    name: string
}
type Children = Parent & {age: number}  // 交叉类型

两者不同点

type可以，interface不行

type Name = string;  // 基本类型
type NameResolver = () => string;  
type NameOrResolver = Name | NameResolver;  // 联合类型
type Children = Parent & {age: number}  // 交叉类型
type x = [string, number] // 元组Tuple类型

interface可以，type不可以

合并重复声明

interface Parent {
    name: string
}
interface Parent {
    age: number
}
cosnt parent: Parent = {
    name: '张',
    age: 18
}

注意：重复声明type，会报错

在编译器中，鼠标悬停到定义的TS，显示结果不同

interface定义如下：

type定义如下：

总结

通过以上介绍，interface和type应用场景还是存在区别的。 type（类型别名）主要用于定义基本类型、元组、联合类型或交叉类型的时候。 interface 一般用于extends或implements时，描述一个对象。 vscode编码中，用type定义的类型，鼠标悬停较清晰看到定义的所有属性。定义对象或者函数，用哪个都行，看个人喜好。大家有不同见解的，欢迎交流。

你对TS中的 interface 和type了解多少？