[譯] TypeScript：擁有超能力的 JavaScript (上)

• 原文地址：TypeScript — JavaScript with superpowers
• 原文做者：Indrek Lasn
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：jonjia
• 校對者：moods445 goldEli

TypeScript：擁有超能力的 JavaScript (上)

JavasSript 很酷。但你知道什麼更酷一點嗎？TypeScript。

你能看出這段代碼有什麼問題嗎？

TypeScript (上) 對比 ES6 (下)

TypeScript 能夠看出來。看到那個紅色的下劃線了嗎？這就是 TypeScript 給咱們的錯誤提示。

你可能已經發現了這個問題（乾的漂亮） — toUpperCase() 是 String 的方法，咱們將一個整型做爲參數傳遞過去，顯然不能在整型上調用 toUpperCase() 方法。

咱們經過聲明 nameToUpperCase() 方法的參數只能爲 string 類型來修復這個問題。

棒棒噠！如今咱們不用本身去記 nameToUpperCase() 的參數類型必須爲 string，咱們能夠信任 TypeScript 去記住它。想象下，若是有成千上萬個參數類型須要咱們記住。太瘋狂了吧！

仍是有錯誤警告。爲何？由於咱們仍是傳遞了個整型參數！傳遞個 string 類型的參數就行了。

注意 TypeScript 最終仍是會被編譯成 JavaScript (它只是 JavaScript 的一個超集，就像 C++ 和 C 的關係同樣)。

以上就是 TypeScript 和類型檢查強大的緣由。

TypeScript 上個月（譯註：2018年1月）有 10,327,953 的下載量。

TypeScript vs Flow 下載量對比

讓咱們開始探索 TypeScript 的世界 — 在深刻探究以前，先來了解下 TypeScript 到底是什麼以及爲何存在。

TypeScript 於 2012 年 10 月 1 日正式開源。 由 Microsoft 開發維護，C# 的首席架構師 Anders Hejlsberg 帶領他的團隊參與了 TypeScript 的開發。

TypeScript 在 GitHub 上徹底開源，因此任何人均可以閱讀它的 源碼 並作出貢獻。

TypeScript — JavaScript 的超集。

如何開始

實際上很是簡單 — 咱們只須要安裝一個 NPM 包。打開你的終端，輸入如下命令：

npm i -g typescript && mkdir typescript && cd typescript && tsc --init
複製代碼

再設置下 TypeScript 的配置文件就能夠了。

咱們只須要建立一個 .ts 文件，並告訴 TypeScript 編譯器監視文件變化。

touch typescript.ts && tsc -w
複製代碼

tsc — TypeScript 編譯器。

最後一步

太好了 — 如今你能夠跟着咱們的示例一塊兒練習。

咱們在 .ts 文件中編寫代碼，編譯後生成的 .js 文件是在瀏覽器中運行的代碼。在這個例子中，咱們不是用瀏覽器環境，咱們使用 NodeJS 環境（因此 .js 是在 Node 環境中運行的）。

JavaScript 有 7 種數據類型，其中 6 種是基礎類型，剩下的被定義爲 Object 類型。

JavaScript 基礎類型以下：

• String
• Number
• Undefined
• Null
• Symbol
• Boolean

剩下的都是 objects

• 函數是頭等對象
• 數組是特殊的對象
• 原型是對象

TypeScript 支持與 JavaScript 相同的基礎類型，此外還提供了一些額外的類型。

額外的類型是可選的，若是你不熟悉那些類型，你就能夠不用。我發現使用 TypeScript 的好處就是：使用起來靈活方便。

額外的類型以下：

元組（tuple）就是組織好結構的數組，只是按照順序定義好數組元素的類型

普通數組 vs 元組（組織好結構的數組）

若是你不遵照元組定義好的規則，TypeScript 會給咱們發出錯誤警告。

元組定義了第一個元素是 number 類型，但賦值時並非 number 類型，而是一個值爲 "Indrek" 的 string 類型，因此編譯結果會報錯。

---

在 TypeScript 中，你須要定義函數返回值的類型。由於有不少沒有 return 語句的函數。

看一下咱們是怎麼聲明參數和返回值類型的 — 它們的類型都是 string。

若是咱們沒有返回任何值會怎麼樣？下面例子的函數體中只有一條 console.log 語句。

咱們能夠看到，編譯結果提示咱們：「嘿，你明確表示咱們必須返回一個 string 類型，但你實際上沒返回任何值。我就是告訴你，你沒有遵照咱們的規則。」

若是咱們就是不想返回任何值該怎麼辦呢？好比咱們的函數中有一個回調函數。在這種狀況下就能夠聲明返回值的類型爲Void。

但有時候咱們的函數確實有返回值，不論是隱式仍是顯式地，咱們都不能將返回值的類型設置爲 Void。

---

any 類型很是簡單，若是咱們要爲還不清楚類型的變量指定一個類型的話，就能夠指定爲 any

好比下面的例子：

能夠看到我給 person 變量屢次賦值，每次使用的值的類型都不一樣。第一次是 string 類型，而後是 number，最後是 boolean。咱們沒法肯定這個變量的類型。

若是你使用第三方的庫，你可能會不知道某些變量的類型。

讓咱們聲明一個數組，你把從某個 API 獲取到的數據存儲到這個數組中。數組中的數據是隨機的。它不會只包括 string、number，也不像元組那樣有組織好的結構。any 類型就能夠解決這個問題。

若是你知道數組的元素都是同一種類型，你可使用下面的語法聲明：

這篇文章的篇幅已經夠長了，咱們將在下一篇文章繼續。咱們還剩下 — enum — never — null — undefined 這些基礎類型和類型斷言須要討論。

下篇文章在此

若是你想深刻學習，能夠閱讀 TypeScript 的 官方文檔

因爲好多人問我這篇文章中的圖片使用的什麼編輯器。我使用 Visual Studio Code 編輯器，配合 Ayu Mirage 主題和 Source Code Pro 字體。

你能夠在個人 Medium 上發現更多有趣的文章。

• Indrek Lasn - Medium: Read writing from Indrek Lasn on Medium. Merchant of happiness, founder @ https://vaulty.io, growth/engineering @… medium.com

也能夠關注個人 twitter。❤

• Indrek Lasn (@lasnindrek) | Twitter: The latest Tweets from Indrek Lasn (@lasnindrek). business propositons: lasnindrek@gmail.com. Zurich, Switzerland twitter.com

感謝閱讀！

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。