加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 移动互联 > 正文

TypeScript 中高级应用与完美实践

发布时间:2019-08-01 17:03:16 所属栏目:移动互联 来源:AlloyTeam
导读:当我们讨论 TypeScript 时,我们在讨论什么? TypeScript 的定位 JavaScript 的超集 编译期行为 不引入额外开销 不改变运行时行为 始终与 ESMAScript 语言标准一致 (stage 3 语法) TypeScript 中的 Decorator 较为特殊,为 Angular 团队和 TypeScript 团队

与 interface 相比,type 的特点如下:

  • 表达功能更强大,不局限于 object/class/function
  • 要扩展已有 type 需要创建新 type,不可以重名
  • 支持更复杂的类型操作
  1. type Tuple = [number, string]; 
  2. const a: Tuple = [2, 'sir']; 
  3. type Size = 'small' | 'default' | 'big' | number; 
  4. const b: Size = 24; 

基本上所有用 interface 表达的类型都有其等价的 type 表达。但我在实践的过程中,也发现了一种类型只能用 interface 表达,无法用 type 表达,那就是往函数上挂载属性。

  1. interface FuncWithAttachment { 
  2.     (param: string): boolean; 
  3.     someProperty: number; 
  4.   
  5. const testFunc: FuncWithAttachment = ...; 
  6. const result = testFunc('mike');    // 有类型提醒 
  7. testFunc.someProperty = 3;    // 有类型提醒 

extends 关键字

extends 本意为 “拓展”,也有人称其为 “继承”。在 TypeScript 中,extends 既可当作一个动词来扩展已有类型;也可当作一个形容词来对类型进行条件限定(例如用在泛型中)。在扩展已有类型时,不可以进行类型冲突的覆盖操作。例如,基类型中键 a 为 string,在扩展出的类型中无法将其改为 number。

  1. type A = { 
  2.     a: number 
  3.   
  4. interface AB extends A { 
  5.     b: string 
  6. // 与上一种等价 
  7. type TAB = A & { 
  8.     b: string 

泛型

在前文我们已经看到类型实际上可以进行一定的运算,要想写出的类型适用范围更广,不妨让它像函数一样可以接受参数。TS 的泛型便是起到这样的作用,你可以把它当作类型的参数。它和函数参数一样,可以有默认值。除此之外,还可以用 extends 对参数本身需要满足的条件进行限制。

在定义一个函数、type、interface、class 时,在名称后面加上<> 表示即接受类型参数。而在实际调用时,不一定需要手动传入类型参数,TS 往往能自行推断出来。在 TS 推断不准时,再手动传入参数来纠正。

  1. // 定义 
  2. class React.Component<P = {}, S = {}, SS = any> { ... } 
  3. interface IShowConfig<P extends IShowProps> { ... } 
  4. // 调用 
  5. class Modal extends React.Component<IModalProps, IModalState> { ... } 

条件类型

除了与、或等基本逻辑,TS 的类型也支持条件运算,其语法与三目运算符相同,为 T extends U ? X : Y 。这里先举一个简单的例子。在后文中我们会看到很多复杂类型的实现都需要借助条件类型。

  1. type IsEqualType<A, B> = A extends B ? (B extends A ? true : false) : false; 
  2. type NumberEqualsToString = IsEqualType<number, string>;   // false 
  3. type NumberEqualsToNumber = IsEqualType<number, number>;    // true 

环境 Ambient Modules

在实际应用开发时有一种场景,当前作用域下可以访问某个变量,但这个变量并不由开发者控制。例如通过 Script 标签直接引入的第三方库 CDN、一些宿主环境的 API 等。这个时候可以利用 TS 的环境声明功能,来告诉 TS 当前作用域可以访问这些变量,以获得类型提醒。

具体有两种方式,declare 和三斜线指令。

  1. declare const IS_MOBILE = true;    // 编译后此行消失 
  2. const wording = IS_MOBILE ? '移动端' : 'PC端'; 

用三斜线指令可以一次性引入整个类型声明文件。

  1. /// <reference path="../typings/monaco.d.ts" /> 
  2. const range = new monaco.Range(2, 3, 6, 7); 
深入类型系统

基本类型

基本类型,也可以理解为原子类型。包括 number、boolean、string、null、undefined、function、array、字面量(true,false,1,2,‘a’)等。它们无法再细分。

复合类型

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读