• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。