异同点
// 代码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];
个人认为类型别名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能够天然的结合在一起使用。在双方都能实现的区域,它们的区别不大。