TypeScript 4.5 發佈，帶來 Promise 功能改進

原創

2021-11-19 11:23

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"11 月 17 日，微軟發佈 "},{"type":"link","attrs":{"href":"https:\/\/www.typescriptlang.org\/","title":"xxx","type":null},"content":[{"type":"text","text":"TypeScript"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 4.5 正式版本，本次更新，帶來大幅功能更新和性能改進，包括引入 Awaited 類型和 Promise 改進，用於增強異步編程、引入 es2022 模塊、支持 Import 斷言等。具體更新內容如下："}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Awaited 類型與 Promise 改進"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在此前的版本中，要獲取 Promise 的返回類型，必須使用 infer 功能，如下所示："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"type Unwrap = T extends PromiseLike ? U : T;\nconst resultPromise = Promise.resolve(true);\n\/\/ resultUnwrapType is boolean \ntype resultUnwrapType = Unwrap;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"TypeScript 4.5 引入了一種新的實用程序類型： "},{"type":"codeinline","content":[{"type":"text","text":"Awaited"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 類型，你不需要像上面的 Unwarp 那樣自定義映射類型，舉例如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"type resultUnwrapType = Awaited;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"該工具還有以下功能："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"遞歸解包"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"不依賴 "},{"type":"codeinline","content":[{"type":"text","text":"PromiseLike"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 更穩健"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"利用 "},{"type":"codeinline","content":[{"type":"text","text":"Awaited"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" ，爲 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.all"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 、 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.race"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 、 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.allSettled"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.any"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 增加重載"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"下面看一些不同的用例"}]},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"\/\/ type is string\ntype basic = Awaited>;\n\/\/ type is string\ntype recursive = Awaited>>;\n\/\/ type is boolean\ntype nonThenObj = Awaited;\n\/\/ type is string | Date\ntype unions = Awaited>>;\ntype FakePromise = { then: () => string };\n\/\/ type is never\ntype fake = Awaited;"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"在 Nightly 版本支持 Node.js 運行 ECMAScript 模塊"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/nodejs.org\/zh-cn\/","title":"xxx","type":null},"content":[{"type":"text","text":"Node.js"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 的模塊基礎一直是 CommonJS，隨着多態應用的轉變，支持 ECMAScript 模塊的要求也越來越高。過去幾年時間裏，Node.js 一直在努力支持運行 "},{"type":"link","attrs":{"href":"https:\/\/zh.wikipedia.org\/zh-hans\/ECMAScript","title":"xxx","type":null},"content":[{"type":"text","text":"ECMAScript"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 模塊。從 Node.js 12 版本開始，對 ES 模塊的支持就很廣泛了。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"ES 模塊帶來了什麼"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"使用 "},{"type":"codeinline","content":[{"type":"text","text":"import\/export"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 語句語法"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"頂級 await 可與 "},{"type":"codeinline","content":[{"type":"text","text":"nodenext"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 一起使用"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"因爲現在有不同的模塊策略 ES 模塊相對導入需要完整的文件擴展名： "},{"type":"codeinline","content":[{"type":"text","text":"import fade from .\/utils.js"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"一些全局關鍵字，如 "},{"type":"codeinline","content":[{"type":"text","text":"require"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 在 ES 模塊上不起作用"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"CommonJS 將轉譯 ES 特性，如 "},{"type":"codeinline","content":[{"type":"text","text":"import\/export"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 語法"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}},{"type":"strong"}],"text":"目前該功能僅在 TypeScript Nightly 版本中可用。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"node_modules 支持 lib"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"爲了確保 TypeScript 和 JavaScript 能夠開箱即用，TypeScript 捆綁了一系列聲明文件(.d .ts文件)。這些聲明文件表示 JavaScript 語言中可用的 API 和標準的瀏覽器 DOM API。雖然根據文件目標有一些合理的默認值，但你可以通過在tsconfig.json 中配置 lib 設置，來挑選程序使用哪些聲明文件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"TypeScript 4.5 引入了一種覆蓋特定內置庫的方法，類似於 @types\/support 的工作方式。在決定 TypeScript 應該包含哪些 lib 文件時，它首先會在 "},{"type":"codeinline","content":[{"type":"text","text":"node_modules"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 中尋找一個有作用域的 @typescript\/lib-* 包。例如，當在 lib 中包含 dom 選項時，TypeScript 會使用 "},{"type":"codeinline","content":[{"type":"text","text":"node_modules\/@typescript\/lib-dom"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 中的類型。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"然後可以安裝一個特定的包來接管給定的庫。例如，現在 TypeScript 在 @types\/web 上發佈 DOM API 版本。如果你想鎖定你的項目到一個特定版本的 DOM API，可以添加這個到你的 package.json："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"{\n \"dependencies\": {\n \"@typescript\/lib-dom\": \"npm:@types\/web\"\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"從 TypeScript 4.5 開始，依賴管理器的鎖文件（lockfile）會確保使用的 DOM 類型的版本完全相同。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"其他新特性："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"引入 es2022 模塊：TypeScript 現在支持一個新的模塊設置：es2022。es2022 模塊的主要功能是頂層 await，意味着開發者可以在 async 函數之外使用 await。這在模塊 esnext（以及現在的模塊 nodenext）中已經得到支持，但 es2022 是這個功能的第一個穩定目標。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"模板字符串可以用作判斷符：TypeScript 4.5 現在可以縮小具有模板字符串類型的值，並且還將模板字符串類型識別爲判別式。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"新的代碼段補全：TypeScript 4.5 帶來了兩個新的代碼段補全，這些補全添加了一些默認文本，並允許開發人員可能通過標籤查看想要調整的代碼片段。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"支持 import 斷言：TypeScript 4.5 支持 ECMAScript 關於導入斷言的提議，這是運行時使用的一種語法，以確保導入有一個預期的格式。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"私有字段檢查：開發人員現在可以編寫一個具有 #private 字段成員的類，並使用 in 運算符查看另一個對象是否具有相同的字段，以用於檢查對象上是否具有私有字段。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"JSDoc 中的常量斷言和默認類型參數"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"更快的加載時間：對所有系統的 Node.js 引入 "},{"type":"codeinline","content":[{"type":"text","text":"realpathSync.native"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 函數，減少項目加載時間（Windows 少了 5-13%）。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"更好的編輯器支持：對未解析的類型會直接展示原名（之前版本是用 "},{"type":"codeinline","content":[{"type":"text","text":"any"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" 來代替未解析的類型）"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"參考鏈接："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-5\/","title":null,"type":null},"content":[{"type":"text","text":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-5\/"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]}]}]}