[譯] TypeScript 快速學習指南

zhaofeihao發表於2019-03-22
TypeScript

原文連結 TypeScript Quick Start Guide

本文將告訴你如何快速開始使用 TypeScript，同時探討一下使用 TypeScript 的優缺點。TypeScript 是 JavaScript 和 Ecma TC39 標準 的超集。TypeScript 賦予我們在程式碼中定義簡單和複雜靜態型別變數的能力。

TypeScript 只是簡單的將 JavaScript 和可選的變數型別結合起來。你可以使用現代 JavaScript 語法(ES2015+)來寫 TypeScript，編譯器會將 TypeScript 檔案(.ts)轉換成 JavaScript 檔案(.js)，同時也提供將 JavaScript 程式碼轉譯為更早版本(如ES5)程式碼的能力。

需要注意的是，如果你正在瀏覽器端使用的模組化解決方案是諸如require()或import / export，那麼你仍需使用類似 Webpack, Rollup, 或者 SystemJS 的打包工具。

安裝 TypeScript

你可以使用 npm

npm install -g typescript
複製程式碼

或 yarn

yarn global add typescript
複製程式碼

來安裝 TypeScript。全域性安裝後，就可以在你的終端中使用tsc命令了。

編譯a.ts檔案

開啟你的終端，使用以下命令建立一個目錄，這裡以ts-simple為例：

mkdir ts-simple
複製程式碼

使用cd命令進入該資料夾，建立一個index.ts檔案。在該檔案中，我們建立一個sayHello函式，函式引數為name，型別為string。

[譯] TypeScript 快速學習指南
現在，使用tsc命令來編譯你的index.ts檔案：

tsc index.ts
複製程式碼

該操作會移除函式sayHello中引數的型別約束，建立一個index.js檔案，同時轉換為 ES5 程式碼。最終的 js 檔案可以安全的執行在瀏覽器或者 Node 環境。你的 JavaScript 檔案看起來可能是這樣的：

[譯] TypeScript 快速學習指南
為了驗證輸出結果，使用如下命令執行該檔案：

node index.js
// 控制檯輸出結果
// "Hello, gitconnected!"
複製程式碼

TypeScript 對編譯錯誤的處理

使用 TypeScript 的一個好處就是如果你程式碼中變數型別不符，它會自動捕獲到這類錯誤。比如說，假設上面的例子中，我們想在傳入的引數上呼叫trim()方法。如果我們傳入的引數是其他型別，就會導致我們的程式碼再生產環境下丟擲異常，而不是在出錯前就捕獲它。讓我們來看一下如果向函式中傳遞一個陣列會發生什麼：

[譯] TypeScript 快速學習指南
執行tsc index.ts，出現如下報錯：

[譯] TypeScript 快速學習指南
要是我們不使用 TypeScript 來保護我們防止出現類似錯誤就把程式碼部署到生產環境中去的話，使用者就會在訪問我們站點時出現這樣的 Bug：

[譯] TypeScript 快速學習指南

額外的 TypeScript 檔案擴充套件

除了.ts檔案，你還可以用.d.ts檔案來標記某個早期的 js 庫中物件的型別，或是使用.tsx檔案來在 React 專案中用 TypeScript 寫 JSX 語法。

使用 TypeScript 的好處

  • 在開發環境下捕獲錯誤。 它允許我們在程式碼執行出錯前就發現錯誤。
  • 智慧提示和程式碼自動補全。 TypeScript 被市面上主流 IDE 和文字編輯器所支援，比如 VS Code 和 Atom。他們對程式碼自動補全提供了強大的整合度。提供行內錯誤識別。
  • 提高了程式碼的可讀性。 當你的程式碼中有強型別變數、函式和物件時，TS提供的結構使得更容易推理新程式碼， 消除了關於資料該採用什麼型別的猜測遊戲。
  • 使用 ES2015+ 。 TypeScript 編譯器能處理所有現代 JavaScript 程式碼，並且可以向後編譯到以前版本的 JS 以實現相容性。
  • 可選的靜態型別。 TypeScript 不需要所有內容都靜態型別化，因此你可以逐步轉換專案為 TypeScript。
  • 強大的生態。 自2012年以來 TypeScript 一直的茁壯成長，讓它具有一個強大的生態系統。 許多開源軟體包本身就內建 TypeScript 型別，使整合更加容易。
  • 增加職業機會。 TypeScript 已被許多大型科技公司(包括谷歌和微軟)使用整合。 通過學習 TypeScript，你可以在職場中提升競爭力。
  • 在 React 中使用 TypeScript 無需再引入 PropTypes。 如果你的 React 專案中使用了 TypeScript，則不再需要為 React 管理 PropTypes，從而可以更快地捕獲錯誤，並使props與程式碼中使用的型別更緊密地耦合。

TypeScript的不足之處

  • 編寫程式碼需要更高的前期成本。 因為需要寫更多的程式碼，就會使新功能的開發速度變慢，這可能不是每個公司或創業公司都能接受的，需要再三權衡。
  • 又多了一個需要持續跟進最新版本的庫。 如果你想保持始終使用最新版本的的 TS，那麼每當新版本出來後都需要進行一些重構的工作。
  • js 工程師的學習曲線。 TypeScript 會使一些以前只寫 JS 的工程師的學習曲線變陡。
  • 複雜的型別可能很難搞清楚。 如果要將 TypeScript 整合到現有的程式碼庫中可能會遇到麻煩，比如無法正確輸入所有內容並處理複雜的資料結構，因為這些資料結構僅在程式碼為 JS 時才「正常工作」。
  • 程式碼更囉嗦。 雖然結構最終對程式是有幫助的，但與 JavaScript 相比，你將使用更多程式碼來編寫相同的功能。
  • 依然需要使用打包工具。 對於ES2015中模組的import / export語法來說，還是需要 Webpack等打包工具。

相關文章