- 原文地址：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 上發現更多有趣的文章。
也可以關注我的 twitter。❤
感謝閱讀！
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。