TS中type和interface的区别前端TypeScript

异同点

// 代码1 interface Person { age: T; sex: string; } let lucy: Person = { age: 1, sex: 'woman', } type People = { age: T; sex: string; } let lily: People = { age: 1, sex: 'woman', }

从代码1中我们发现接口interface和类型别名type在定义一个普通的对象类型时没啥区别，泛型都能照常用。
如果我们定义一个简单类型呢？

// 代码2 type Name = string | number; let me: Name = 123;

如代码2所示，像这样的简单类型的定义，type用起来就很随意，但是interface恐怕就无法做到了。

// 代码3 interface SetPerson { (age: number, sex: string): void; }type SetPeople = (age: number, sex: string) => void; let setPerson: SetPerson = function (age, sex) {}; let setPeople: SetPeople = function (age, sex) {};

如代码3，它们两都可以轻松实现一个函数的类型，写法稍微有点区别，但是它们都能被类class实现吗？

// 代码4 interface SetPerson { (age: number, sex: string): void; }type SetPeople = (age: number, sex: string) => void; class Config implements SetPerson { setPerson(age: number, sex: string) { // do nothing } }

如代码4所示，接口interface可以被一个类class实现(implements)，但是类型别名是不行的。

// 代码5 interface Common { name: string; } interface Person extends Common { age: T; sex: string; }let lucy: Person = { age: 1, sex: 'woman', name: 'lucy', } // ----分割---- type Con = { name: string; } type People = { age: T; sex: string; } & Con; let lily: People = { age: 1, sex: 'woman', name: 'lily', }

代码5类型别名type不但不能被extends和implements，就连自己也不能extends和implements其它类型，好在我们可以用交叉类型代替extends来达到同样的效果。
说到这里，你就会发现type可以使用联合类型、交叉类型还有元组等类型，如下图。

// 代码6 interface Common { name: string; } interface Person extends Common { age: T; sex: string; } type People = { age: T; sex: string; } & Common; type P1 = Person | People; type P2 = [Person, People];

【TS中type和interface的区别】个人认为类型别名type最大的特点是可以结合typeof使用，如下：

// 代码7 class Config { setPerson(age: number, sex: string) { // do nothing } }type T = typeof Config; let C: T = class { setPerson(age: number, sex: string) { // do nothing } }

图7
总结
这篇文章主要总结了typescript中类型别名type和接口interface在使用上的一些区别，在类class的类型定义中我们使用接口interface来做，在定义简单类型、联合类型、交叉类型、元组时我们用类型别名type来做，并且它和typeof能够天然的结合在一起使用。在双方都能实现的区域，它们的区别不大。