Typescript3.9 常用新特性一覽(推薦)
更新什么?概況一覽
1、優(yōu)化了 Promise.all 的定義,在 3.7 版本中一些混用 null 或 undefined 的時(shí)候的問(wèn)題已經(jīng)在 3.9 得到了修復(fù)。
2、大大的提高了打包速度,微軟團(tuán)隊(duì)自測(cè)的時(shí)候 typescript項(xiàng)目的平均編譯時(shí)間由 26s 縮短到了 10s 左右。
3、// @ts-expect-error 新注釋的添加
4、在條件語(yǔ)句中檢測(cè)未調(diào)用的函數(shù)
5、編輯器提升
- 5.1 在 JavaScript 中 CommonJS 的自動(dòng)引入
- 5.2 在代碼操作的時(shí)候正確的保留換行符
- 5.3 添加快速修復(fù)缺失的函數(shù)返回表達(dá)式
- 5.4 支持 "Solution Style" tsconfig.json 文件
6、一些重大變化
主要是在 TypeScript 定義和書(shū)寫(xiě)規(guī)范上的改動(dòng)和修復(fù)以前的 bugs
挑幾個(gè)重點(diǎn)的寫(xiě)一下
1、interface 的優(yōu)化和 promise.all 使用修復(fù)
我們知道在 3.7 版本后面對(duì) promise.all & promise.race 等方法做出了更新,但是也制造出了一個(gè)問(wèn)題。在使用 null & undefined 尤其明顯。
nterface Lion { roar(): void } interface Seal { singKissFromARose(): void } async function visitZoo(lionExhibit: Promise<Lion>, sealExhibit: Promise<Seal | undefined>) { let [lion, seal] = await Promise.all([lionExhibit, sealExhibit]); lion.roar(); // uh oh // ~~~~ // Object is possibly 'undefined'. }
這種行為就很奇怪了,實(shí)際上 sealExhibit 當(dāng)中包含的 undefined,相當(dāng)于是把 undefined 錯(cuò)誤引入了 lion type 當(dāng)中, 這里是一個(gè)錯(cuò)誤引用。
當(dāng)然在最新的 3.9 版本中修復(fù)了這個(gè)問(wèn)題。
1.1 全新的 awaited type
awaited type 主要是對(duì)現(xiàn)在的 promise 更好的定義和使用。
預(yù)計(jì)在 **`3.9`** 發(fā)布的,結(jié)果微軟又跳票了,可以等下一個(gè)版本了。
2、TypeScript 打包編譯等速度提升
這里主要是優(yōu)化了幾個(gè)微軟的內(nèi)部項(xiàng)目的性能優(yōu)化,比如:
- Typescript 團(tuán)隊(duì)發(fā)現(xiàn)以前的 Material-ui 與 Styled-Components 等組件會(huì)帶來(lái)極差的編輯 / 編譯速度后。主要從聯(lián)合類(lèi)型、交叉類(lèi)型、條件 判斷的 type 類(lèi)型以及各種映射 type 類(lèi)型的性能問(wèn)題來(lái)優(yōu)化。 把相關(guān)的庫(kù)編譯時(shí)間減少了 40% 左右。
- 根據(jù) Visual Studio Code 團(tuán)隊(duì)提供的建議,我們發(fā)現(xiàn)在執(zhí)行文件重命名時(shí),單是查明哪些導(dǎo)入語(yǔ)句需要更新就要耗去 5 到 10 秒時(shí)間。TypeScript 3.9 調(diào)整了內(nèi)部編譯器與語(yǔ)言服務(wù)緩存文件的查找方式,順利解決了這個(gè)問(wèn)題。
詳情可以看看下面這幾個(gè) pull request 的具體優(yōu)化內(nèi)容
https://github.com/microsoft/TypeScript/pull/36576
https://github.com/microsoft/TypeScript/pull/36590
https://github.com/microsoft/TypeScript/pull/36607
https://github.com/microsoft/TypeScript/pull/36622
https://github.com/microsoft/TypeScript/pull/36754
https://github.com/microsoft/TypeScript/pull/36696
4、在條件語(yǔ)句中檢測(cè)未調(diào)用的函數(shù)
在 3.7 的時(shí)候引入了檢測(cè)未調(diào)用函數(shù)錯(cuò)誤提示,3.9 做了部分優(yōu)化
function hasImportantPermissions(): boolean { // ... } // Oops! if (hasImportantPermissions) { // ~~~~~~~~~~~~~~~~~~~~~~~ // This condition will always return true since the function is always defined. // Did you mean to call it instead? deleteAllTheImportantFiles(); }
但是,此錯(cuò)誤僅適用于if語(yǔ)句中的條件。現(xiàn)在三元條件(即語(yǔ)法)現(xiàn)在也支持此功能。比如 cond ? trueExpr : falseExpr
declare function listFilesOfDirectory(dirPath: string): string[]; declare function isDirectory(): boolean; function getAllFiles(startFileName: string) { const result: string[] = []; traverse(startFileName); return result; function traverse(currentPath: string) { return isDirectory ? // ~~~~~~~~~~~ // This condition will always return true // since the function is always defined. // Did you mean to call it instead? listFilesOfDirectory(currentPath).forEach(traverse) : result.push(currentPath); } }
5、編輯器的提升
5.1 CommonJS 的自動(dòng)補(bǔ)全
新版本的另一項(xiàng)重大改進(jìn),是使用 CommonJS 模塊自動(dòng)導(dǎo)入 JavaScript 文件。
在舊版本中,TypeScript 強(qiáng)制要求用戶(hù)無(wú)論使用什么文件,都必須以 ECMAScript 的形式導(dǎo)入,例如:
import * as fs from "fs";
但在編寫(xiě) JavaScript 文件時(shí),很多用戶(hù)并不打算使用 ECMScript 樣式模塊。不少朋友仍在使用 CommonJS 樣式的 require(...) 導(dǎo)入,例如:
const fs = require("fs");
TypeScript 現(xiàn)在能夠自動(dòng)檢測(cè)您所使用的導(dǎo)入類(lèi)型,保證文件樣式簡(jiǎn)潔而統(tǒng)一。現(xiàn)在有了如下自動(dòng)引入的功能
const { readFile } = require('fs')
5.2 缺失的函數(shù)返回值的自動(dòng)修復(fù)功能
在某些情況下,我們可能會(huì)忘記返回函數(shù)中的最后一條語(yǔ)句的值,尤其是在向箭頭函數(shù)添加大括號(hào)時(shí)。
// before let f1 = () => 42 // oops - not the same! let f2 = () => { 42 }
6、重大改進(jìn)!
6.1 解析可選鏈與非 null 斷言中的差異
ypeScript 最近實(shí)現(xiàn)了對(duì)可選鏈操作符的支持,但根據(jù)廣大使用者的反饋,非 null 斷言操作符(!)的可選鏈(?.)行為不符合直覺(jué)。
具體來(lái)講,在以往的版本中,代碼:
foo?.bar!.baz
被解釋為等效于以下 JavaScript 代碼:
(foo?.bar).baz
在以上代碼中,括號(hào)會(huì)阻止可選鏈的“短路”行為;因此如果未定義 foo 為 undefined,則訪問(wèn) baz 會(huì)引發(fā)運(yùn)行時(shí)錯(cuò)誤。
換句話說(shuō),大多數(shù)人認(rèn)為以上原始代碼片段應(yīng)該被解釋為在:
foo?.bar.baz
中,當(dāng) foo 為 undefined 時(shí),計(jì)算結(jié)果為 undefined。
這是一項(xiàng)重大變化,但我們認(rèn)為大部分代碼在編寫(xiě)時(shí)都是為了考慮新的解釋場(chǎng)景。如果您希望繼續(xù)使用舊有行為,則可在!操作符左側(cè)添加括號(hào),如下所示:
(foo?.bar)!.baz
參考
https://www.typescriptlang.org/docs/home.html
到此這篇關(guān)于Typescript3.9 常用新特性一覽(推薦)的文章就介紹到這了,更多相關(guān)Typescript3.9 新特性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板
這篇文章主要為大家詳細(xì)介紹了JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01TypeScript 學(xué)習(xí)筆記之基本類(lèi)型
TypeScript 是 JavaScript 的超集,TypeScript 經(jīng)過(guò)編譯之后都會(huì)生成 JavaScript 代碼。TypeScript 最大的特點(diǎn)就是類(lèi)型化,因此才叫做 TypeScript。比起弱類(lèi)型的 JavaScript,類(lèi)型化的 TypeScript 顯得更加容易維護(hù)。2015-06-06Three.js中的紋理圖像應(yīng)用和屬性調(diào)整方法
在three.js中紋理貼圖是用來(lái)給物體表面添加圖案、顏色或者其他視覺(jué)效果的一種技術(shù),這篇文章主要給大家介紹了關(guān)于Three.js中紋理圖像應(yīng)用和屬性調(diào)整的相關(guān)資料,需要的朋友可以參考下2024-01-01JavaScript常見(jiàn)鼠標(biāo)事件與用法分析
這篇文章主要介紹了JavaScript常見(jiàn)鼠標(biāo)事件與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript 8種常見(jiàn)的鼠標(biāo)事件與相關(guān)使用技巧,需要的朋友可以參考下2019-01-01Bootstrap基本樣式學(xué)習(xí)筆記之標(biāo)簽(5)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之標(biāo)簽基本樣式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12bootstrap實(shí)現(xiàn)嵌套模態(tài)框的實(shí)例代碼
這篇文章主要介紹了bootstrap實(shí)現(xiàn)嵌套模態(tài)框的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01詳解開(kāi)源的JavaScript插件化框架MinimaJS
這篇文章主要介紹了開(kāi)源的JavaScript插件化框架MinimaJS的詳解,詳細(xì)的介紹了MinimaJS的使用,具有一定的參考價(jià)值,有興趣的可以了解一下2017-10-10javascript下用鍵盤(pán)控制層的移動(dòng)的代碼
javascript下用鍵盤(pán)控制層的移動(dòng)的代碼...2007-04-04