成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

如何編寫健壯的 TypeScript 庫?

新聞 前端
當你用 TypeScript 編寫庫時,你通常不知道這個庫最終將如何被使用。

 當你用 TypeScript 編寫庫時,你通常不知道這個庫最終將如何被使用。即使你 警告潛在用戶,你編寫這個庫只是針對 TypeScript 用戶,你還是可能會在某個時刻擁有 JavaScript 用戶——或者是因為他們不顧你的警告而使用這個庫,或者是他們因為傳遞性依賴而使用這個庫。這有一個非常重要的后果:你必須將這個庫設計成任何語言的開發者都可以使用!

[[349529]]

其主要部分是函數定義和函數體。如果你針對一個純 TypeScript 讀者編寫,那么你只需定義函數類型并信任編譯器處理其它事情。如果你針對一個純 JavaScrpit 讀者編寫,那么你需要記錄那些類型,但在函數中將實際的類型設為unknown并檢查調用方傳遞的內容。

例如,給定如下代碼

  1. interface Person { 
  2.  
  3. age: number; 
  4.  
  5. name?: string; 
  6.  
  7.  
  8. function describe(person: Person): string { 
  9.  
  10. let name = person.name ?? 'someone'
  11.  
  12. return `${name} is ${person.age} years old!`; 
  13.  

一個 JS 用戶可能用任何東西來調用describe函數。

正確寫法:

  1. describe({ name: "chris" }) 

災難性的錯誤寫法: 

  1. describe("potato"); 

最常見的 JS 錯誤:

  1. describe(undefined); 

你的庫的 JS 用戶并不是故意這么做的。恰恰相反,在任何足夠大的系統中,很容易將錯誤的參數傳遞給系統中的某個函數。這通常是一個很難避免的錯誤,比如在一個點上做了修改,許多其它地方需要更新,但漏掉了一個點。故意的 JS 開發者會把壞數據發送到你設計精美的 TS API 中。

如果你針對一個純 TypeScript 讀者編寫,那么你只需定義函數類型并信任編譯器處理其它事情

我故意不提 TypeScript 編譯非常嚴格,從一個與 JavaScript 沒有區別的級別到幾乎任何人可能想到的嚴格級別。這意味著,即使是 TypeScript 調用者也應該像 JavaScript 調用者一樣被對待:眾所周知,他們到處亂扔any,忽略了事實上可能是null或undefined的地方。返回上面的示例代碼:

  1. interface Person { 
  2.  
  3. age: number; 
  4.  
  5. name?: string; 
  6.  
  7.  
  8. function describe(person: Person): string { 
  9.  
  10. let name = person.name ?? 'someone'
  11.  
  12. return `${name} is ${person.age} years old!`; 
  13.  

在沒有啟用嚴格標識的情況下,TypeScript 用戶可以如下調用describe:

  1. function cueTheSobbing(data: any) { 
  2.  
  3. describe(data); 
  4.  
  5.  
  6. cueTheSobbing({ breakfastOf: ["eggs""waffles"] }); 

或者這樣:

  1. describe(null); 

或者這樣:

  1. describe({ age: null }) 

也就是說:JS 調用者大部分會出錯的方式,TS 調用者在關閉嚴格性設置的情況下也會出錯。這意味著故意的 TypeScript 用戶也會用壞數據調用你的庫。而且由于他們依賴其它庫,這很可能不是他們的錯誤,因為這種問題可能發生在依賴圖中的任何地方。

因此,如果問題是我們不能信任數據,那么我們應該怎么做?一個選項是使函數的所有參數實際為unknown,并用 JSDoc 指定它該如何。然而,那樣會使我們失去大量 TS 提供的能力。當與函數交互時,我們即使在內部也不會得到補全或類型錯誤,更不用說我們的庫的用戶。但是正如我們剛剛看到的,我們也不能依賴類型定義來提供函數內部的安全性。不過,我們可以將這幾種方法結合起來:指定類型定義,并將傳入的數據視為實際上的unknown。這確實帶來了運行時開銷——我們稍后將圍繞這個權衡進行詳細討論。現在,我們可以先看看如何檢查類型。

首先,我們會像實際上會從調用者得到真正未知的數據來編寫我們的代碼,因為我們已經確定了這正是我們可能得到的。一旦我們完成了對unknown數據的校驗,我們就能夠將它替換為Person,而且所有東西都應該繼續工作,但是現在我們可以保證它對任何拋給它的數據都能夠工作。

  1. function describe(person: unknown): string { 
  2.  
  3. let name = person.name ?? 'someone'
  4.  
  5. return `${name} is ${person.age} years old`; 
  6.  

這里有類型錯誤,因為這里的person類型可能是undefined或"potato"或者任何其它類型。我們可以使用 TypeScript 的類型縮小的概念來保證安全。然而,從unknown縮小到特定的對象類型有點兒奇怪,因為如果你簡單地檢查是否typeof somethingUnknown === 'object',這會將類型縮小到{},這意味著它不會包含任何我們可能需要的類型。我們會先定義一個isObject輔助函數,它會為我們提供正確的語義:

  1. function isObject( 
  2.  
  3. maybeObj: unknown 
  4.  
  5. ): maybeObj is Record<string | number | symbol, unknown> { 
  6.  
  7. return typeof maybeObj === 'object' && maybeObj !== null
  8.  

我們還需要一種方法來檢查這個對象有沒有指定的屬性。如果in運算符能以這種方式工作就太好了,但不幸的是,它沒有這樣工作。我們也可以內聯這樣做,但是每次都需要類型轉換。我們可以稱之為has,類似于Object.hasOwnProperty方法。由于這還需要檢查isObject返回的類型集——在 JS 中索引一個對象的所有合法類型——我們這里會將其提取到一個新的Key類型。

這個has輔助函數的返回類型告訴類型系統,如果主體為 true,傳入的項目有其原始類型而且它包含我們要檢查的屬性。

  1. type Key = string | number | symbol; 
  2.  
  3. function has<K extends Key, T>( 
  4.  
  5. key: K, 
  6.  
  7. t: T 
  8.  
  9. ): t is T & Record<K, unknown> { 
  10.  
  11. return key in t; 
  12.  

現在我們可以將它們組合成一個類型保護器,來檢查給定對象是否是一個 person:

  1. function isPerson(value: unknown): value is Person { 
  2.  
  3. return ( 
  4.  
  5. isObject(value) && 
  6.  
  7. has('age', value) && typeof value.age === 'number' && 
  8.  
  9. (has('name', value) ? typeof value.name === 'string' : true
  10.  
  11.  

現在,我們可以將所有這些集合到我們函數頂部的一個簡單的檢查中,如果它不合法的話拋出一個有用的錯誤。

  1. function describe(person: unknown): string { 
  2.  
  3. if (!isPerson(person)) { 
  4.  
  5. throw new Error('`describe` requires you to pass a `Person`'); 
  6.  
  7.  
  8. let name = person.name ?? 'someone'
  9.  
  10. return `${name} is ${person.age} years old`; 
  11.  

既然我們已經有了這個功能,我們可以將這里的person類型更新為Person來讓 TypeScript 用戶有更好的體驗。

  1. function describe(person: Person): string { 
  2.  
  3. if (!isPerson(person)) { 
  4.  
  5. throw new Error( 
  6.  
  7. `'describe' takes a 'Person', but you passed ${JSON.stringify(person)}` 
  8.  
  9. ); 
  10.  
  11.  
  12. let name = person.name ?? 'someone'
  13.  
  14. return `${name} is ${person.age} years old`; 
  15.  

TypeScript 支持在條件不包含斷言函數時拋出的這種模式泛化,這非常有用。我們可以編寫如下格式:

  1. function assert
  2.  
  3. predicate: unknown, 
  4.  
  5. message: string 
  6.  
  7. ): asserts predicate { 
  8.  
  9. if (!pred) { 
  10.  
  11. throw new Error(message); 
  12.  
  13.  

現在我們的函數變得更簡單:

  1. function describe(person: Person): string { 
  2.  
  3. assert
  4.  
  5. isPerson(person), 
  6.  
  7. `'describe' takes a 'Person', but you passed ${JSON.stringify(person)}` 
  8.  
  9. ); 
  10.  
  11. let name = person.name ?? 'someone'
  12.  
  13. return `${name} is ${person.age} years old`; 
  14.  

到目前為止,一直都還不錯!我們現在保證,無論誰調用describe,無論是從 JS,還是從松散類型的 TS,或是從其它完全不同的語言,它都會做“正確”的事情,在出錯時向調用者提供一個可操作的錯誤。然而,根據我們的限制,這種運行時校驗會開銷過大而不可行。在一個瀏覽器中,我們通過網絡發送的額外代碼積累起來:需要下載更多東西,也需要解析更多東西,這都會減慢我們的 app。在任何環境中,每次與describe函數交互時都會進行額外的運行時檢查。一種選項是利用一些編譯智能來在開發期間而不是在生產構建中提供這些檢查。Babel 允許你將給定函數轉變成 noops,使得它們不完全沒有開銷,但開銷非常小。例如,Ember CLI 提供了一個 Babel 插件將 Ember 的assert函數(其類型與我在上面定義的assert幾乎等同)轉變成 no-ops。你可以將它與任何可以消除無用代碼的工具結合起來,以刪除所有沒有用到的輔助函數!

這種方案的缺點是,生產環境的錯誤的錯誤消息會比較糟糕,并且更難以調試。優點是,在生產環境中,你將上傳更少的代碼且運行時開銷更少。為了使依賴這種assert片段的代碼工作,終端用戶需要將它與任何具有良好的端到端測試覆蓋的功能、UI 組件等相結合。但是不管怎樣,這都是正確的:類型和測試消除了不同類型的 bugs,最好結合使用!

 

責任編輯:張燕妮 來源: 架構頭條
相關推薦

2025-06-11 03:22:00

JavaScript開發前端

2020-07-15 08:17:16

代碼

2020-06-01 09:40:06

開發ReactTypeScript

2020-06-03 16:50:24

TypeScriptReact前端

2022-08-19 09:01:59

ReactTS類型

2019-12-19 10:10:45

秒殺系統高并發

2025-03-11 08:30:00

Pythonretrying代碼

2025-01-14 00:01:01

2011-03-24 13:09:11

數據庫代碼

2010-07-13 11:47:47

2023-07-30 17:10:32

TypeScript開發

2015-12-21 16:43:29

智慧教育華為

2020-04-26 19:12:29

shell腳本Linux

2023-11-17 11:55:54

Pythonretrying庫

2022-08-04 09:01:45

TypeScriptMicrosoft

2016-01-28 13:33:07

2012-07-11 10:51:37

編程

2022-10-17 09:08:01

2019-01-29 09:00:44

PyHamcrest單元測試框架

2023-08-15 10:12:11

TypeScript標準庫
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 伊人伊人| 欧美国产日韩一区二区三区 | 日韩在线欧美 | 国产精品国产三级国产aⅴ中文 | 黑人巨大精品欧美一区二区免费 | 国产精品成人一区二区 | 久久99精品久久久久久国产越南 | 成人免费一区二区三区视频网站 | 一级做a爰片性色毛片视频停止 | 九九在线精品视频 | 日韩中文字幕在线观看 | 2019天天操| 亚洲一区二区三区免费视频 | 日韩在线精品视频 | 在线免费亚洲视频 | 91精品久久久久 | 中文字幕在线欧美 | 美女久久久久久久久 | 欧美精品在线一区二区三区 | 99久久精品一区二区毛片吞精 | 精品免费国产一区二区三区 | 欧美一区二区三区在线观看 | 青青久久| 欧州一区二区 | 蜜桃视频成人 | 在线观看成人小视频 | 欧美成视频 | 黄色高清视频 | 久久久久国产 | 日韩精品一区二区三区视频播放 | 久久久999免费视频 999久久久久久久久6666 | av一区二区三区四区 | 成人在线播放网站 | 欧美激情一区二区三区 | av天空| 国产国语精品 | 欧美一区免费在线观看 | 欧美舔穴 | 伊人狠狠操| 久久99精品国产 | 网页av|