[譯] 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。

如今，使用 tsc命令來編譯你的 index.ts文件：

tsc index.ts
複製代碼

該操做會移除函數sayHello中參數的類型約束，建立一個index.js文件，同時轉換爲 ES5 代碼。最終的 js 文件能夠安全的運行在瀏覽器或者 Node 環境。你的 JavaScript 文件看起來多是這樣的：

爲了驗證輸出結果，使用以下命令運行該文件：

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

TypeScript 對編譯錯誤的處理

使用 TypeScript 的一個好處就是若是你代碼中變量類型不符，它會自動捕獲到這類錯誤。好比說，假設上面的例子中，咱們想在傳入的參數上調用trim()方法。若是咱們傳入的參數是其餘類型，就會致使咱們的代碼再生產環境下拋出異常，而不是在出錯前就捕獲它。讓咱們來看一下若是向函數中傳遞一個數組會發生什麼：

運行 tsc index.ts，出現以下報錯：

要是咱們不使用 TypeScript 來保護咱們防止出現相似錯誤就把代碼部署到生產環境中去的話，用戶就會在訪問咱們站點時出現這樣的 Bug：

額外的 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等打包工具。