关于前端:TS中type和interface的区别

异同点

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

从代码1中咱们发现接口interface和类型别名type在定义一个一般的对象类型时没啥区别，泛型都能照常用。

如果咱们定义一个简略类型呢？

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

如代码2所示，像这样的简略类型的定义，type用起来就很随便，然而interface恐怕就无奈做到了。

// 代码3interface 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实现吗？

// 代码4interface 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)，然而类型别名是不行的。

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

代码5类型别名type岂但不能被extends和implements，就连本人也不能extends和implements其它类型，好在咱们能够用穿插类型代替extends来达到同样的成果。

说到这里，你就会发现type能够应用联结类型、穿插类型还有元组等类型，如下图。

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

集体认为类型别名type最大的特点是能够联合typeof应用，如下：

// 代码7class 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可能人造的联合在一起应用。在单方都能实现的区域，它们的区别不大。