- 原文地址:TypeScript — JavaScript with superpowers — Part II
- 原文作者:Indrek Lasn
- 譯文出自:掘金翻譯計劃
- 本文永久連結:github.com/xitu/gold-m…
- 譯者:jonjia
- 校對者:Usey95 anxsec
TypeScript:擁有超能力的 JavaScript(下)
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/90501ee8b3defb5f7e4a97730a30458b4e431b5d04e306eaf94d8f190121ebb8.png)
歡迎回來,繼前文 [譯] TypeScript:擁有超能力的 JavaScript (上) 之後,本週帶來下篇。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/c45677157fca86a27192e2b5cab48406943a75816cf26b5e5818f602aedea45c.png)
使用列舉(enum)可以更清晰地組合一組資料。
下面我們來看看如何構造一個列舉型別:
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/5b9d49720dc2256286a2072df3aa8b0650a8993596e26326fae87adcdb3062d1.png)
你可以通過下面的方法從列舉中取值:
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/102719872179d9bc6ea4d15ddfeed5a139476e7de1913ec6a077fa5093689550.png)
但這樣返回的是這個值的整數索引,和陣列一樣,列舉型別的索引也是從 0
開始的。
那我們怎麼獲取到 "Indrek"
呢?
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/7bc586472388d74fec361d3f4dee0479661d2c3965d066e69cd8ef7a9d5db20a.png)
注意看我們怎麼獲取到字串的值。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/4133e8a5b9d45d7538ce7bb28f1c76db016fc8211135666efbfa1c51313d1a27.png)
還有一個很好的例子是使用列舉儲存應用的狀態。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/9f44e3660fe78bfe3d371054cdef7c9aa475e8fb0096e00b4b9a4b3fc0db4847.png)
如果你想了解更多關於列舉(enum)的知識,stackoverflow 上的這個回答 探討了更多關於列舉的細節。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/9ee4bb99e3ad5955e35ef16bf672c5e6c22e07d0a5d69e6453bbbfa357c368bb.png)
假設我們請求某個 API,獲取了一些資料。我們總是期望成功獲取資料 — 但如果我們無法獲取到資料會怎樣呢?
是時候返回 never
型別了,比如下面這種特殊使用場景:
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/e4ae188931d9e74795e9aa08f6daa35537a20525ce8593a32061fbe5daba5475.png)
我們可以在另外的方法中呼叫 error
方法(回撥)
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/b60e77bec7693bae1ac68242afa818cd5663d2ee192824c346a898ed6d70ee82.png)
因為我們推斷返回值的型別是 never
,所以我們宣告返回值的型別為 never
,而不是 void
。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/e68698466a6d9dfa771c7362d135e6303df0b12cdc6bf8966448efa0bb546266.png)
- null — 沒有任何值。
- undefined — 變數被宣告瞭,但沒有賦值。
它們本身的型別用處不是很大。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/fac1b7bbb5afd8637fc9622e5e4e38b313d73513541aa682862bffe3c34938e9.png)
預設情況下 null
和 undefined
是所有型別的子型別。就是說你可以把 null
和 undefined
賦值給 number
型別的變數。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/167cf0f9d2da509a5bc0bb8ccad9162fec459809fbdc7630b7b557851eba855e.jpg)
關於 null
和 undefined
,Axel Rauschmayer 博士寫過 一篇非常棒的文章。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/2029c90cff2b6879757cb5e1783e91c253ed824e1f0498b1e347a159a0abc224.png)
型別斷言通常會發生在你清楚地知道一個實體具有比它現有型別更確切的型別。
它在執行時沒有影響,只會在編譯階段起作用。TypeScript 會假設你 — 程式設計師,已經進行了必要的檢查。
下面是一個簡單示例:
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/52d406bd85caf7845fcb0807cebda99b26695ed539961d68157bef625ffcd826.png)
尖括號 <>
語法與 JSX 用法衝突,所以我們只能使用 as
語法進行斷言。
![[譯] TypeScript:擁有超能力的 JavaScript(下)](https://i.iter01.com/images/def94b300fa9aec0de2bc35b8c6f6e51cf2cf6ba733eb2c87514445dbfd18ef9.png)
一些更酷的東西
現在 — 用 TypeScript 來構造些有趣的東西吧!?
感謝閱讀,希望你有所收穫!
你可以關注我的 Twitter。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。