大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在
github与好文
应用场景
interface用于定义引用数据类型,比如Map、Set、Class、Function等
type则通吃
相同点
- 都可以用于定义对象、函数、类
在如下示例的对象和函数的最后部分进行了变量的赋值，这说明两者定义的类型是等价的
1-对象
interface Iperson{
name:string
}
type Tperson = {
name:string
}
let n:Iperson = {
name:'s'
}
let na:Tperson = {
name:'sp'
}
na = n
2-函数
interface Iperson{
name:string;
(age:number):void;
}
type Tperson = {
name:string;
(age:number):void;
}
let n:Iperson = (age)=>{}
let na:Tperson = (age)=>{}
na = n
3-类
interface Iperson{
name:string;
getAge(age:number):void;
}
type Tperson = {
name:string;
getAge(age:number):void;
}
class N implements Iperson{
name='s'
getAge(age:number){
}
}
class NA implements Tperson{
name='sp'
getAge(age:number){
}
}
- 都支持泛型
interface Iperson<name>{
name:name;
getAge(age:number):void;
}
type Tperson<name> = {
name:name;
getAge(age:number):void;
}
class N implements Iperson<string>{
name='s'
getAge(age:number){
}
}
class NA implements Tperson<string>{
name='sp'
getAge(age:number){
}
}
- 都允许扩展
两者的扩展符不一样，interface是extends，type则是&
interface Iperson<name>{
name:name;
getAge(age:number):void;
}
type Tperson<name> = {
name:name;
getAge(age:number):void;
}
interface Su extends Iperson<string>{
age:string
}
type Pan = Tperson<string> & {
age:string
}
不同点
- 类型别名可以为基本类型、联合类型或元组类型定义别名，而接口不行
type MyBoolean = boolean;
type StringOrBoolean = string | MyBoolean;
type Collect = StringOrBoolean[];
- 同名接口会自动合并，type则报错
interface Person {
name: string;
}
interface Person {
age: number;
}
let user: Person = {
name:'sp';
age:28
}
利用这一点，我们可以对第三方包的具体的某个接口进行扩展，而不是重写，伪代码如下
import { interfaceName } from 'npmPackage'
declare module 'npmPackage' {
export interface interfaceName {
[o:string]:any;
}
}
如果本文对您有用，希望能得到您的点赞和收藏
订阅专栏，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟😎
