作者丨Saurabh Barot

2018 年發起的 Stack Overflow 開發人員調查揭示了業內關於不同編程語言、平臺、庫等的一些流行觀點。基於這項研究可以看出，TypeScript 是比 JavaScript 更受喜愛的編程語言。開發者喜歡使用 TypeScript 的因素之一是它可以向 JavaScript 添加類型。

這樣你就能在運行代碼之前發現錯誤了。此外 TypeScript 編譯器還能為你提供建議，幫助你更好地解決這些錯誤。

開發者將類型添加到 JavaScript 後還可以使用代碼編輯器中的一些高級功能，如自動模塊導入、代碼自動補完和重構整個項目等。

TypeScript 只是一個基於 JavaScript 的層。TypeScript 的學習曲線很陡峭，使用它之前應該先好好學習它的語法，這樣上手起來更快。

開發者可以輕鬆地將 JavaScript 文件轉換為 TypeScript，只需將文件擴展名從.js 更改為.ts 即可。之後所有 TypeScript 代碼都將編譯為 JavaScript。

1、什麼是 TypeScript？

實際上 TypeScript 是一種編程語言。它也被稱為 JavaScript 的超集。你可以在 TypeScript 中找到 JavaScript 中的所有功能。它可以用作大型 JavaScript 應用程序的編程語言。

好消息是最新版本的 ECMAScript 就能支持 TypeScript 了。編譯 TypeScript 時還能同時輸出一個 JavaScript 版本，在所有平臺上都能正常運行。

2、TypeScript 的受歡迎程度

如果我們看一下 TypeScript 從 2016 年到 2018 年的發展歷程，你會發現用過 TypeScript 並願意再次使用的用戶比例從 20.8％增加到了 46.7％。開發人員選擇它的主要原因之一是它能減少錯誤。

TypeScript 如今越來越受歡迎，具體數據表現如下：

3、TypeScript V/s JavaScript

TypeScript 面世已經有幾年時間了，相繼發佈了很多新版本，有了許多改進。這些改進體現在功能、函數、性能等許多方面。使用 TypeScript 取代 JavaScript 的現象也越來越多。要深入瞭解這一狀況，你需要對這些技術有客觀的認識。

那麼讓我們比較一下…

JavaScript

• 用法。JavaScript 是一種遵循客戶端編程原則的腳本語言。它用於開發交互式網頁。這意味著它不需要 Web 瀏覽器提供任何內容，也可以輕鬆地在用戶的 Web 瀏覽器上運行。
• 數據綁定。在 JavaScript 中沒有使用接口和類型描述數據的概念。
• 生態系統。不需要任何構建步驟就能用 JS 編碼。
• 學習曲線。JavaScript 簡單靈活。
• 原型。JavaScript 沒有原型功能。
• 代碼編譯。你不需要在 TypeScript 中編譯代碼。
• 類型標註。 JavaScript 不需要類型標註。

TypeScript

• 用法。TypeScript 是一種基於 JavaScript 的開發語言。用它可以編寫簡單的 JavaScript 代碼，寫出來的代碼可以在任何支持 ECMAScript 3 或更新版本的瀏覽器上運行。
• 數據綁定。TypeScript 使用接口和類型來描述數據。
• 生態系統。TypeScript 帶有直觀的生態系統。這樣你就可以在項目中加入一些 JavaScript 功能。
• 學習曲線。TypeScript 有著嚴格的學習曲線。
• 原型。TypeScript 具有原型功能。
• 代碼編譯。 你需要在 TypeScript 中編譯代碼。
• 類型標註。開發人員需要不斷地為他們的代碼標註，以便數據能夠得到良好的輸出展示。

4、開發者最喜歡的一些 TypeScript 功能

未知頂級類型

“unknown”類型在 TypeScript 3.0 中引入，作為與“any”類型對應的新“類型安全”。區分“unknown”和“any”兩個概念的關鍵在於，“unknown”比“any”（“任何”自 2012 年以來就一直是 TypeScript 的組成部分）寬鬆很多。它與“any”非常相似，因為你可以為“unknown”分配任何值；但這裡類型斷言是很重要的，沒有它什麼都做不了。此外，你不能訪問或調用 / 構造任何“unknown”類型的屬性。

數組和元組上的映射類型

涉及到元組上的映射時，TypeScript 沒有引入全新概念，而是在 TypeScript 3.1 中加入了有映射的對象類型。這與同數組和元組交互時應該採用的方式完全一致。這意味著不管你在用什麼方式使用已存在的映射類型（如必需或部分），這些方法也能直接拿來處理數組和元組。這樣，TypeScript 可以很好地適用於像 Promise.all 這樣的函數。

Node.js 包與 tsconfig.json 的繼承

使用 TypeScript 3.2 時你可以從 node_modules 解析 tsconfig.json。當你嘗試訪問 tsconfig.json 中的“extends”字段時，TypeScript 將查看 thenode_modules 包。它將在 node_modules 文件夾中查找 @my-team/tsconfig-base 的包。在進一步使用該包之前，TypeScript 會查找 package.json 中是否存在 tsconfig 字段，並且一旦找到它就會從字段中加載配置文件。如果找不到這樣的字段，那麼它將轉向 tsconfig.json。在處理大型項目時，這一步驟被證明是很有用的。

Const 斷言

TypeScript 3.4 引入了一個新的字面值構造，它被稱為 const 斷言。它的語法是一個類型斷言，用 const 斷言構造新的文字表達式時，你可以表示對象字面量帶有隻讀屬性，或者數組具有隻讀元組。

對 globalThis 進行類型檢查

在全局範圍內訪問值一直是 TypeScript 的一個問題，這個問題在 TypeScript 3.4 中得到了解決，因為新版為 ECMAScript 中的 globalThis 提供了類型檢查支持。globalThis 只是一個適用於全局範圍的全局變量。此變量可讓你從喜歡的任何環境中輕鬆訪問全局範圍。同樣，你需要知道 globalThis 不顯示兩個全局變量，即 const 和 let。

在 JSX 中支持 defaultProps

TypeScript 3.0 為 JSX 中的 React 開發提供了一種新類型，稱為 LibraryManagedAttributes。此類型用作幫助程序，用於在 prop 類型組件使用之前定義它的更改。這樣就可以對推斷和提供的映射與 prop 進行修改。

需要注意的是如果添加了顯式類型註釋，編譯器將無法識別默認屬性，因為默認屬性是從 defaultProps 的屬性類型推斷出來的。

5、TypeScript 的優勢

它是一種面向對象的語言，這種面向對象的語言具有接口、類、繼承、模塊等功能。

可選靜態類型

TypeScript 附帶可選的靜態類型系統，是它的一大優勢。你可以向屬性、函數、變量等添加類型。因此在應用程序運行之前，編譯器就能顯示有關任何潛在問題（如果存在）的任何警告。類型能讓開發人員知道自己需要哪種類型 API，在使用框架和庫時這一點很有用。

需要記住的是使用類型是可選的。就是說開發人員不會被 TypeScript 強迫使用他們不想要的任何類型。但要記住，當應用程序規模變大，且隨時間變得愈加複雜時，類型也會越來越體現其價值。

提供對 JavaScript 庫的支持

你可以將 TypeScript 與現有的頂級 JavaScript 框架和庫以及其他工具一起使用。

TypeScript 是可移植的

你可以在任何設備、瀏覽器或操作系統上運行 TypeScript。它可以在各種設備上輕鬆使用，全平臺兼容。你可以在支持 JavaScript 的任何環境中運行 TypeScript。

更少的錯誤

在前端開發領域，如果開發者能更方便地發現編程過程中發生的錯誤就能節約很多時間。這也就是為什麼你需要 TypeScript。使用 TypeScript 時，你可以確保代碼庫中沒有無效代碼。

智能感知

在你的項目中使用 TypeScript 的另一個好處是智能感知，因為它能幫助代碼自動補完。寫代碼時智能感知能提供有用的提示。當今市面上所有重要的 IDE 都支持代碼自動補完功能，包括 Sublime Text、Atom、WebStorm、VScode，還包括一些命令行編輯器。

TypeScript 很像 JS

TypeScript 代碼完全在 JavaScript 中運行。這意味著你只需要對 JavaScript 有所瞭解即可開始使用 TypeScript。在代碼執行方面，用 TypeScript 編寫的代碼被編譯並轉換為 JavaScript。

6、結論

開發者在已經意識到 TypeScript 可以大幅提高生產力，並輕鬆構建可靠且可擴展的應用程序。將它集成到現有的 JavaScript 是非常容易的，並且它可以輕鬆地與 React、Angular、Node 和 Vue 一起使用。

你還要知道 JavaScript 和 TypeScript 都在不斷髮展，它們絕不會相互競爭。它們只是相互補充，各自滿足不同的需求。因此，你可以根據你的項目需求選擇正確的解決方案。

原文鏈接：

https://aglowiditsolutions.com/blog/why-use-typescript/