肥东网站制作,医疗网站建设模板制作,温州seo推广公司,教育学校网站做大家好#xff0c;我是若川。持续组织了8个月源码共读活动#xff0c;感兴趣的可以 点此加我微信ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外… 大家好我是若川。持续组织了8个月源码共读活动感兴趣的可以 点此加我微信ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外目前建有江西|湖南|湖北籍前端群可加我微信进群。阿宝哥精心准备的《轻松学 TypeScript》 视频教程已经更新到第十二期了通过形象生动的动画让你轻松搞懂 TypeScript 的难点和核心知识点如果你简历上的技能有写 TypeScript那么面试官可能会问你 type 和 interface 之间有什么区别你知道怎么回答这个问题么如果不知道的话那看完本文也许你就懂了。类型别名 type 可以用来给一个类型起个新名字当命名基本类型或联合类型等非对象类型时非常有用type MyNumber number;
type StringOrNumber string | number;
type Text string | string[];
type Point [number, number];
type Callback (data: string) void;在 TypeScript 1.6 版本类型别名开始支持泛型。我们工作中常用的 Partial、Required、Pick、Record 和 Exclude 等工具类型都是以 type 方式来定义的。// lib.es5.d.ts
type PartialT {[P in keyof T]?: T[P];
};type RequiredT {[P in keyof T]-?: T[P];
};type PickT, K extends keyof T {[P in K]: T[P];
};type RecordK extends keyof any, T {[P in K]: T;
};type ExcludeT, U T extends U ? never : T;而接口 interface 只能用于定义对象类型Vue 3 中的 App 对象就是使用 interface 来定义的// packages/runtime-core/src/apiCreateApp.ts
export interface AppHostElement any {version: stringconfig: AppConfiguse(plugin: Plugin, ...options: any[]): thismixin(mixin: ComponentOptions): thiscomponent(name: string): Component | undefined // Gettercomponent(name: string, component: Component): this // Setterdirective(name: string): Directive | undefineddirective(name: string, directive: Directive): this
}由以上代码可知在定义接口时我们可以同时声明对象类型上的属性和方法。了解 type 和 interface 的作用之后我们先来介绍一下它们的相似之处。1、类型别名和接口都可以用来描述对象或函数类型别名type Point {x: number;y: number;
};type SetPoint (x: number, y: number) void;在以上代码中我们通过 type 关键字为对象字面量类型和函数类型分别取了一个别名从而方便在其他地方使用这些类型。接口interface Point {x: number;y: number;
}interface SetPoint {(x: number, y: number): void;
}2、类型别名和接口都支持扩展类型别名通过 交叉运算符来扩展而接口通过 extends 的方式来扩展。类型别名扩展type Animal {name: string
}type Bear Animal { honey: boolean
}const bear: Bear getBear()
bear.name
bear.honey接口扩展interface Animal {name: string
}interface Bear extends Animal {honey: boolean
}此外接口也可以通过 extends 来扩展类型别名定义的类型type Animal {name: string
}interface Bear extends Animal {honey: boolean
}同样类型别名也可以通过 交叉运算符来扩展已定义的接口类型interface Animal {name: string
}type Bear Animal { honey: boolean
}了解完 type 和 interface 的相似之处之后接下来我们来介绍它们之间的区别。1、类型别名可以为基本类型、联合类型或元组类型定义别名而接口不行type MyNumber number;
type StringOrNumber string | number;
type Point [number, number];2、同名接口会自动合并而类型别名不会同名接口合并interface User {name: string;
}interface User {id: number;
}let user: User { id: 666, name: 阿宝哥 };
user.id; // 666
user.name; // 阿宝哥同名类型别名会冲突type User {name: string;
};// 标识符“User”重复。ts(2300)
type User { //Errorid: number;
};利用同名接口自动合并的特性在开发第三方库的时候我们就可以为使用者提供更好的安全保障。比如 webext-bridge 这个库使用 interface 定义了 ProtocolMap 接口从而让使用者可自由地扩展 ProtocolMap 接口。之后在利用该库内部提供的 onMessage 函数监听自定义消息时我们就可以推断出不同消息对应的消息体类型。扩展 ProtocolMap 接口import { ProtocolWithReturn } from webext-bridgedeclare module webext-bridge {export interface ProtocolMap {foo: { title: string }bar: ProtocolWithReturnCustomDataType, CustomReturnType}
}监听自定义消息import { onMessage } from webext-bridgeonMessage(foo, ({ data }) {// type of data will be { title: string }console.log(data.title)
}如果你感兴趣的话可以看一下该项目的源码。若遇到问题可以跟阿宝哥交流。最后我们来总结一下类型别名和接口的一些使用场景。使用类型别名的场景定义基本类型的别名时使用 type定义元组类型时使用 type定义函数类型时使用 type定义联合类型时使用 type定义映射类型时使用 type使用接口的场景需要利用接口自动合并特性的时候使用 interface定义对象类型且无需使用 type 的时候使用 interface················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经坚持写了8年点击查看年度总结。同时最近组织了源码共读活动帮助4000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。扫码加我微信 ruochuan02、拉你进源码共读群今日话题目前建有江西|湖南|湖北 籍 前端群想进群的可以加我微信 ruochuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~
