面试官：说说你对TypeScript中高级类型的理解？有哪些？

[[422806]]

本文转载自微信公众号「JS每日一题」，作者 灰灰。转载本文请联系JS每日一题公众号。

成都创新互联公司是一家集网站建设,白山企业网站建设,白山品牌网站建设,网站定制,白山网站建设报价,网络营销,网络优化,白山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

一、是什么

除了string、number、boolean 这种基础类型外，在 typescript 类型声明中还存在一些高级的类型应用

这些高级类型，是typescript为了保证语言的灵活性，所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景

二、有哪些

常见的高级类型有如下：

  • 交叉类型
  • 联合类型
  • 类型别名
  • 类型索引
  • 类型约束
  • 映射类型
  • 条件类型

交叉类型

通过 & 将多个类型合并为一个类型，包含了所需的所有类型的特性，本质上是一种并的操作

语法如下：

 
 
 
 
    
  
  
  
  
  1. T & U 
    2.

适用于对象合并场景，如下将声明一个函数，将两个对象合并成一个对象并返回：

 
 
 
 
    
  
  
  
  
  1. function extend(first: T, second: U) : T & U { 
    2. 
  
  
  
  
  2.     let result:  = {} 
    3. 
  
  
  
  
  3.     for (let key in first) { 
    4. 
  
  
  
  
  4.         result[key] = first[key] 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     for (let key in second) { 
    7. 
  
  
  
  
  7.         if(!result.hasOwnProperty(key)) { 
    8. 
  
  
  
  
  8.             result[key] = second[key] 
    9. 
  
  
  
  
  9.         } 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11.     return result 
    12. 
  
  
  
  
  12. } 
    13.

联合类型

联合类型的语法规则和逻辑 “或” 的符号一致，表示其类型为连接的多个类型中的任意一个，本质上是一个交的关系

语法如下：

 
 
 
 
    
  
  
  
  
  1. T | U 
    2.

例如 number | string | boolean 的类型只能是这三个的一种，不能共存

如下所示：

 
 
 
 
    
  
  
  
  
  1. function formatCommandline(command: string[] | string) { 
    2. 
  
  
  
  
  2.   let line = ''; 
    3. 
  
  
  
  
  3.   if (typeof command === 'string') { 
    4. 
  
  
  
  
  4.     line = command.trim(); 
    5. 
  
  
  
  
  5.   } else { 
    6. 
  
  
  
  
  6.     line = command.join(' ').trim(); 
    7. 
  
  
  
  
  7.   } 
    8. 
  
  
  
  
  8. } 
    9.

类型别名

类型别名会给一个类型起个新名字，类型别名有时和接口很像，但是可以作用于原始值、联合类型、元组以及其它任何你需要手写的类型

可以使用 type SomeName = someValidTypeAnnotation的语法来创建类型别名：

 
 
 
 
    
  
  
  
  
  1. type some = boolean | string 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. const b: some = true // ok 
    4. 
  
  
  
  
  4. const c: some = 'hello' // ok 
    5. 
  
  
  
  
  5. const d: some = 123 // 不能将类型“123”分配给类型“some” 
    6.

此外类型别名可以是泛型:

 
 
 
 
    
  
  
  
  
  1. type Container = { value: T }; 
    2.

也可以使用类型别名来在属性里引用自己：

 
 
 
 
    
  
  
  
  
  1. type Tree = { 
    2. 
  
  
  
  
  2.     value: T; 
    3. 
  
  
  
  
  3.     left: Tree; 
    4. 
  
  
  
  
  4.     right: Tree; 
    5. 
  
  
  
  
  5. } 
    6.

可以看到，类型别名和接口使用十分相似，都可以描述一个对象或者函数

两者最大的区别在于，interface只能用于定义对象类型，而 type 的声明方式除了对象之外还可以定义交叉、联合、原始类型等，类型声明的方式适用范围显然更加广泛

类型索引

keyof 类似于 Object.keys ，用于获取一个接口中 Key 的联合类型。

 
 
 
 
    
  
  
  
  
  1. interface Button { 
    2. 
  
  
  
  
  2.     type: string 
    3. 
  
  
  
  
  3.     text: string 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. type ButtonKeys = keyof Button 
    7. 
  
  
  
  
  7. // 等效于 
    8. 
  
  
  
  
  8. type ButtonKeys = "type" | "text" 
    9.

类型约束

通过关键字 extend 进行约束，不同于在 class 后使用 extends 的继承作用，泛型内使用的主要作用是对泛型加以约束

 
 
 
 
    
  
  
  
  
  1. type BaseType = string | number | boolean 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. // 这里表示 copy 的参数 
    4. 
  
  
  
  
  4. // 只能是字符串、数字、布尔这几种基础类型 
    5. 
  
  
  
  
  5. function copy(arg: T): T { 
    6. 
  
  
  
  
  6.   return arg 
    7. 
  
  
  
  
  7. } 
    8.

类型约束通常和类型索引一起使用，例如我们有一个方法专门用来获取对象的值，但是这个对象并不确定，我们就可以使用 extends 和 keyof 进行约束。

 
 
 
 
    
  
  
  
  
  1. function getValue(obj: T, key: K) { 
    2. 
  
  
  
  
  2.   return obj[key] 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. const obj = { a: 1 } 
    6. 
  
  
  
  
  6. const a = getValue(obj, 'a') 
    7.

映射类型

通过 in 关键字做类型的映射，遍历已有接口的 key 或者是遍历联合类型，如下例子：

 
 
 
 
    
  
  
  
  
  1. type Readonly = { 
    2. 
  
  
  
  
  2.     readonly [P in keyof T]: T[P]; 
    3. 
  
  
  
  
  3. }; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. interface Obj { 
    6. 
  
  
  
  
  6.   a: string 
    7. 
  
  
  
  
  7.   b: string 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. type ReadOnlyObj = Readonly 
    11.

上述的结构，可以分成这些步骤：

  • keyof T：通过类型索引 keyof 的得到联合类型 'a' | 'b'
  • P in keyof T 等同于 p in 'a' | 'b'，相当于执行了一次 forEach 的逻辑，遍历 'a' | 'b'

所以最终ReadOnlyObj的接口为下述：

 
 
 
 
    
  
  
  
  
  1. interface ReadOnlyObj { 
    2. 
  
  
  
  
  2.     readonly a: string; 
    3. 
  
  
  
  
  3.     readonly b: string; 
    4. 
  
  
  
  
  4. } 
    5.

条件类型

条件类型的语法规则和三元表达式一致，经常用于一些类型不确定的情况。

 
 
 
 
    
  
  
  
  
  1. T extends U ? X : Y 
    2.

上面的意思就是，如果 T 是 U 的子集，就是类型 X，否则为类型 Y

三、总结

可以看到，如果只是掌握了 typeScript 的一些基础类型，可能很难游刃有余的去使用 typeScript，需要了解一些typescript的高阶用法，在实践场景中，还有更多更复杂的组合，需要在实践中慢慢体会

参考文献

https://www.tslang.cn/docs/handbook/advanced-types.html

https://juejin.cn/post/6844904003604578312

https://zhuanlan.zhihu.com/p/103846208

文章名称：面试官：说说你对TypeScript中高级类型的理解？有哪些？
文章起源：http://www.shufengxianlan.com/qtweb/news43/218743.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

python知识

分类信息网站

主动防护网　　 　抖音代运营　　 　网站托管运营　　 　小程序开发　　 　红锐电子　　 　成都网创优客　　 　微信小程序公众号开发　　 　凯亚自动化控制　　 　四川德阳主机托管　　 　网站建设公司　　 　乐山服务器托管　　 　软文发稿　　 　腾讯香港免备案空间　　 　广汉锦华　　 　中国电信成都枢纽中心　　 　四川国泰民安消防　　 　郫县封阳台　　 　西云服务器托管　　 　网络推广公司　　 　胜锦安防科技