[TypeScript] 要基於condition地return資料?拋棄 && , 擁抱 ?: ,讓編程更優雅。

Posted on Wed, Oct 7, 2020 科技趣聞 TypeScript

我一直自稱Code狗但好似無講過Code,啱啱某個Project就有Groupmate嘅Code出咗少少意外。

係React Native入面,要Print文字必須用

<Text>我係文字</Text>

咁如果係個string varible:

let str = "我係文字"
<Text>{str}</Text>

好啦呢個係第一部分。第二部分係,如果係condition或者任何functions return 嘢嘅時候可以咁做判斷:

let loliArray = ["Alita", "Len", "Aoi"]
return loliArray.length && "Lolis is here"

係上面段code,根據&&特性,佢首先會睇每個&&相隔嘅condition會係點,第一個係true會執行下一個,直至最後一個,就會return佢。而上面嘅例子,就會return “Lolis is here”,跟住因爲String有字,所以係If()入面亦會自動轉化作true。

好,揸住呢兩點,我有位groupmate咁寫:

let loliArray = ["Alita", "Len", "Aoi"]
<Widget>{loliArray.length && "Lolis is here"}</Widget>

但呢段Code係React 特定情況下係會報錯嘅,因爲React Native,技術上所有Display文字都要用

所以難道就冇優雅且迷人嘅inline判斷寫法嗎?當然有,你可以咁寫:

let loliArray = ["Alita", "Len", "Aoi"]
return loliArray.length ? "Lolis is here" : "Loli is not here"

意思其實就係, condition ? true_return : false_return 。如果?號前嘅condition係true,就return 冒號前嘅內容,否則就return冒號後嘅內容。簡單易明又清晰,亦可以避免很多嘅潛在錯誤,不亦樂乎?