在学习TypeScript的时候,SEO禅觉得最迷惑的地方就是Type和Interface到底有什么区别?看着好像没什么区别?那为什么要有这两个不同的关键字呢,找到一篇文章说的还不错,翻译过来分享给各位。
声明合并
通常我们使用type都是作为变量或者参数的限定类型,interface更倾向于OOP的编程思维,相当于定义一个接口,和他的名字差不多,通常他们可以混用,但是也有一些区别,首先是interface能够进行声明合并,也就是说定义了两个相同名称的接口,TS会讲interface进行合并,但是type会报错,如下:
interface SEO {
name: string;
};
interface SEO {
level: string;
};
const seozen: SEO = {
name: "SEO禅",
level: "Awesome"
};
扩展和实现
在TS中就和其他OOP语言类似,你能很容易的扩展和实现interface接口,但是type是有些约束的,比如:
class Person {
printName = () => {
console.log("我叫SEO禅")
}
};
interface SEOZEN extends Person {
name: string;
};
class NewSEOZEN implements SEOZEN {
name: "SEO禅";
constructor(engine:string) {
this.name = name
}
printName = () => {
console.log("SEO禅优化")
}
};
这种OOP的编程方式type关键字就无法实现了。
组合
我们可以通过type组合生成新的类型别名,如:
type Name = {
name: “string”
};
type Age = {
age: number
};
type Person = Name & Age;
// 组合interface
interface Name {
name: “string”
};
interface Age {
age: number
};
type Person = Name & Age;
但是你无法使用interface做这件事。
联合
我们还可以使用type对变量或者返回值,作联合声明,规定范围,如:
type Man = {
name: “string”
};
type Woman = {
name: “string”
};
type Person = Man | Woman;
interface Man {
name: "string"
};
interface Woman {
name: "string"
};
type Person = Man | Woman;
我该用哪个?
就像之前说的interface偏向于OOP编程,比如定义一个对象,定义一些接口方法,而type比较经常用在参数类型,函数返回值等,如:
type Person = {
name: string,
age: number
};
type ReturnPerson = (
person: Person
) => Person;
const returnPerson: ReturnPerson = (person) => {
return person;
};
参考链接:https://blog.logrocket.com/types-vs-interfaces-in-typescript/
作者:SEO禅
本文链接:TypeScript基础知识:Type 和 Interface的区别
版权申明:如无特殊说明,本站文章均为作者原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处,谢谢!