日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
面試官：說說你對TypeScript中高級類型的理解？有哪些？

[[422806]]

本文轉載自微信公眾號「JS每日一題」，作者 灰灰。轉載本文請聯系JS每日一題公眾號。

成都創(chuàng)新互聯公司是一家集網站建設,白山企業(yè)網站建設,白山品牌網站建設,網站定制,白山網站建設報價,網絡營銷,網絡優(yōu)化,白山網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

一、是什么

除了string、number、boolean 這種基礎類型外，在 typescript 類型聲明中還存在一些高級的類型應用

這些高級類型，是typescript為了保證語言的靈活性，所使用的一些語言特性。這些特性有助于我們應對復雜多變的開發(fā)場景

二、有哪些

常見的高級類型有如下：

  • 交叉類型
  • 聯合類型
  • 類型別名
  • 類型索引
  • 類型約束
  • 映射類型
  • 條件類型

交叉類型

通過 & 將多個類型合并為一個類型，包含了所需的所有類型的特性，本質上是一種并的操作

語法如下：

 
 
 
 
    
  
  
  
  
  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.

聯合類型

聯合類型的語法規(guī)則和邏輯 “或” 的符號一致，表示其類型為連接的多個類型中的任意一個，本質上是一個交的關系

語法如下：

 
 
 
 
    
  
  
  
  
  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的語法來創(chuàng)建類型別名：

 
 
 
 
    
  
  
  
  
  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.

可以看到，類型別名和接口使用十分相似，都可以描述一個對象或者函數

兩者最大的區(qū)別在于，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'，相當于執(zhí)行了一次 forEach 的邏輯，遍歷 'a' | 'b'

所以最終ReadOnlyObj的接口為下述：

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

條件類型

條件類型的語法規(guī)則和三元表達式一致，經常用于一些類型不確定的情況。

 
 
 
 
    
  
  
  
  
  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.5511xx.com/article/dpdjiig.html