淺談TypeScript3.7中值得注意的3個新特性
前言
距typescript 3.7正式發(fā)布已經(jīng)有一段時間了,這段時間正在對手上的項(xiàng)目進(jìn)行typescript的遷移工作,所以會特別留意每一次的release。
對于3.7中包含的新特性,其實(shí)相比較之前幾次release來說,算是一個比較小的發(fā)布版本,但是其中包含的幾個特性對代碼質(zhì)量本身,會帶來顯著地提升。
Optional Chaining
首先第一個特性是對于optional chaining操作符的支持,翻譯過來應(yīng)該可以叫做可選鏈操作符,當(dāng)然我還是覺得這樣翻譯有點(diǎn)怪怪的,暫且就直接用英文好了。
這個特性首先是es2019中包含的一個新特性,對于特性本身,有興趣的可以參考這里。
由于typescript是JavaScript的超集,所以預(yù)先實(shí)現(xiàn)這個特性也是在預(yù)料之內(nèi)的事情,大概使用方式是這樣的:
a?.b();
等價于:
if(a) a.b(); // 或者 a && a.b()
如果是多層嵌套,比如b也是一個對象,要繼續(xù)調(diào)用c(),那么可以這樣:
a?.b?.c()
但其實(shí)就算這樣寫的話,它也不是安全的,因?yàn)閎()中的b也有可能是空值,直接調(diào)用的話,也會拋出異常。為了絕對的安全,可以這樣寫:
a?.b?.();
值得注意的是,這里一定要對于可選的含義有一個正確的理解,可選的意思是,它在類型的聲明中,通過?來修飾,代表一個類型包含某個可為空值的屬性。言外之意的意思就是,?.不會對那些不符合類型聲明本身的屬性調(diào)用,比如:
interface A {}
const a: A = {};
a?.b?.(); // Property 'b' does not exist on type 'A'
除非A接口的聲明改為:
interface A {
b?: any
}
這個特性在項(xiàng)目的實(shí)踐意義是很大的,我們可以寫更少的if斷言語句或者&&操作符,但是卻達(dá)到了相同的效果。
Nullish Coalescing
中文翻譯過來會叫做雙問號操作符,這個其實(shí)挺形象的,因?yàn)樗恼Z法確實(shí)就是??。
這個操作符的功能,往簡單說,就是為一個空值,指定一個默認(rèn)值,類似下面的代碼:
let a = b || 'foo'
當(dāng)b為空值時,由于||操作符的特性,a的值會被賦予foo。如果使用??操作符進(jìn)行改寫,如下:
let a = b ?? 'foo'
表面上看,似乎兩者沒什么區(qū)別,但其實(shí)這里隱含了一個問題,就是||對于空值的概念,并不僅僅指null和undefined,類似false、0等一系列邏輯上為false的值都會算作空值,這顯然是有問題的,比如:
const b = 0 let a = b || 'foo' // a 為 'foo'
這個示例中,我們期望a只有在b為真正意義上的空值(null或者undefined)時,才被賦予默認(rèn)值,a應(yīng)當(dāng)?shù)扔?,而實(shí)際運(yùn)行結(jié)果確實(shí)foo,因?yàn)閎=0,在||操作符的運(yùn)行過程中,它會被解釋為false。我曾在實(shí)際項(xiàng)目中,編寫過一個驗(yàn)證碼組件,很不幸,踩上了這個坑,當(dāng)時為了debug這個問題,花了很長時間。
但使用??操作符,就不會存在這個問題。
Uncalled Function Checks
我相信很多人都曾經(jīng)遇過類似的問題,因?yàn)槿狈τ行У拿?guī)范,斷言屬性和斷言方法會在實(shí)際項(xiàng)目中被混用,比如:
class A {
isFoo(): boolean {
return false;
}
}
function test(a: A) {
if (a.isFoo) {
...
}
}
這里如果我們的本意是要通過調(diào)用a.isFoo來獲取一個斷言值,我們明顯犯了一個錯誤,我們應(yīng)當(dāng)使用if (a.isFoo()),而不是直接if (a.isFoo),因?yàn)楹笳唠m然在語法層面沒有錯誤,但是在邏輯含義,它將被斷言為true。但在3.7發(fā)布之后,typescript會嘗試幫助我們發(fā)現(xiàn)這個問題。
雖然如此,但我仍然建議大家針對斷言方法和斷言屬性制定統(tǒng)一的命名規(guī)范,比如isXXX代表屬性,而assertXXX代表方法。
其他
其他的一些變更,均是易用性上的一些改變,比如:
- Flatter Error Reporting:會將一大段的類型重復(fù)的錯誤日志,盡可能地壓縮為單條、更準(zhǔn)確、更精簡的錯誤日志
- 文件級別的@ts-nocheck:之前版本中該注解僅支持行內(nèi)級別
- 遞歸類型聲明:能夠在類型聲明中,使用遞歸語法來聲明更復(fù)雜的類型,比如json類型
- 對js文件提供declaration支持,以減小從js項(xiàng)目遷移的遷移成本
以上就是淺談TypeScript3.7中值得注意的3個新特性的詳細(xì)內(nèi)容,更多關(guān)于TypeScript3.7新特性的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性
這篇文章主要介紹了JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性的相關(guān)資料,需要的朋友可以參考下2017-07-07
微信小程序之圓形進(jìn)度條實(shí)現(xiàn)思路
這篇文章主要介紹了微信小程序之圓形進(jìn)度條實(shí)現(xiàn)思路,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-02-02
使用Performance Observer實(shí)現(xiàn)網(wǎng)頁性能優(yōu)化的示例詳解
在當(dāng)今的網(wǎng)頁開發(fā)中,性能監(jiān)控已經(jīng)成為確保用戶體驗(yàn)的一個關(guān)鍵部分,本文將深入探討一個強(qiáng)大的性能監(jiān)控工具PerformanceObserver,看看如何使用它提升網(wǎng)站性能吧2025-03-03
JS中的prototype與面向?qū)ο蟮膶?shí)例講解
JS中的prototype與面向?qū)ο蟮膶?shí)例講解,需要的朋友可以參考一下2013-05-05
javascript實(shí)現(xiàn) 在光標(biāo)處插入指定內(nèi)容
javascript實(shí)現(xiàn) 在光標(biāo)處插入指定內(nèi)容...2007-05-05
微信小程序如何在頁面跳轉(zhuǎn)時進(jìn)行頁面導(dǎo)航
小程序能夠在不同的頁面進(jìn)行跳轉(zhuǎn)切換,路由起到了至關(guān)重要的作用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何在頁面跳轉(zhuǎn)時進(jìn)行頁面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2022-09-09

