理解 Typescript 和 JavaScript 之間的區別

我收到的常見問題之一是，JavaScript 和 Typescript 之間有什麼區別？

讓我們來了解一下……

從您開始編碼的那一刻起，JavaScript (JS) 就會成為您所有前端項目的一部分。 如果您對 JS 有點熟悉，可以將 TypeScript 視為 JS 加上一些使您的應用程序更整潔和類型化的附加功能。 typeScript 是微軟作為一個開源項目開發的，目的是讓 JS 開發更高效，並儘早發現編譯錯誤。

在本文中，我們將討論 JavaScript 和 TypeScript 的一些重要特性以及兩種腳本語言之間的差異。

什麼是 JavaScript？

JavaScript 用於客戶端腳本。 您可以在 HTML 頁面上創建腳本或創建擴展名為 .js 的文件並將其包含在您的 HTML 文件中。 您可以看到 JavaScript 的一個常見現實示例是登錄頁面驗證，當您的用戶名/密碼不正確時，您會看到一個錯誤。

讓我們編寫一個簡單的 JS 代碼並在瀏覽器上運行它：

創建一個文件 example.html 並添加以下代碼：

 <script> feeling = 'happy'; feeling = 23; </script>

這段簡單的代碼聲明了一個變量並為其分配了一個happy（字符串）值。 我們可以為同一個變量分配一個不同類型（數字）的值。 JavaScript 不會抱怨它，我們可以在任何瀏覽器上運行代碼而不會出現任何問題。 現在，讓我們從用戶那裡得到感受的價值：

我們的 HTML 將如下所示：

 <input type = "textbox" id = "howyoufeel">

腳本將是：

 feeling = document.getElementById("howyoufeel").value;

除非我們在腳本中進行顯式檢查，否則 JS 將接受來自用戶的任何值並將其傳遞。 因此，您可以在感覺變量中放入諸如 234、@.#$% 之類的任何內容。

JavaScript 的特點

綜上所述，我們可以觀察到 JavaScript 的以下特點：

• 弱類型腳本語言
• 用於客戶端和服務器端（使用 node.js）腳本
• 靈活動態
• 所有主流瀏覽器都支持
• 輕量級和解釋性

如果您對掌握 JavaScript 感興趣，請查看此 Udemy 課程。

什麼是打字稿？

實際應用程序將有許多驗證和動態檢查。 對於此類應用程序，JavaScript 代碼在某些時候會變得難以測試，主要是因為沒有類型檢查。 在從用戶那裡獲取價值的同時，重要的是從一開始就讓他們正確。 這就是 TypeScript 的用武之地。

TypeScript 是強類型的，並且有一個編譯器會在您未定義變量的類型時發出警告。

JavaScript 和 TypeScript 都符合腳本語言的 ECMAScript 規範。 Typescript 可以運行所有的 JavaScript 代碼並支持它的所有庫——這就是為什麼它被稱為 JavaScript 的超集。

打字稿安裝

要在 TypeScript 中執行我們之前的代碼，我們需要使用 npm 包安裝 TypeScript 編譯器（如果您有 node js）。

 npm install -g typescript

或直接從 Microsoft 官方下載頁面下載。 也可以使用TS Playground 來看看代碼是如何從ts 轉為js 的。

完成後，您可以在tsconfig.json配置項目設置，並使用任何 IDE 或文本編輯器編寫 TypeScript 代碼並將其保存為.ts 。

您仍然可以通過不定義變量類型而逃脫，而 TypeScript 可以推斷出數據類型。 但是，如果在編譯過程中給出第一個使用的類型（在我們的例子中是一個字符串）以外的任何東西，你會得到一個“感覺”錯誤。

代碼具有可維護性和易用性的類型註釋總是很整潔的：

 var feeling: string = “happy”;

不是這個！

TypeScript 提供了許多其他功能，使開發人員的生活更輕鬆。

打字稿的特點

Typescript 具有豐富的功能集，每個版本都帶有新功能，使開發比以前更容易。 例如，在新版本（4.0）中，一些額外的特性是可變元組類型、自定義 JSX 工廠、從構造函數推斷類屬性等。 TypeScript 的一些典型特性是：

• 支持面向對象的編程概念，如接口、繼承、類。 泛型
• 及早發現錯誤
• IDE 支持語法檢查和建議
• 鍵入時更易於調試
• 反編譯成 JavaScript
• 用於服務器端和客戶端應用程序
• 跨平台和跨瀏覽器支持
• 支持所有 JS 庫和擴展

為什麼我們需要 TypeScript？ （TypeScript 相對於 JavaScript 的優勢）

在 2012 年將 TypeScript 公開之前，微軟為其內部項目開發並使用了兩年的 TypeScript。他們創建了類型化 JavaScript，因為它更容易測試生產級企業應用程序的代碼。 您仍然可以使用動態類型功能，但也可以在真正需要時鍵入變量。

考慮以下代碼：

 var mynum = //get from user; addten(number){ return number + 10; }

我們希望結果總是一個數字。 但是，如果用戶給出“羊”呢？ 輸出將是sheep10——理想情況下，我們需要告訴用戶這個操作是不可能的！

此外，當您擁有可用的類型信息時，文本編輯器和 IDE 將變得更易於使用和保存運行時錯誤。 在以後的時間點重構代碼也更容易。

這是否意味著我們不需要 JavaScript？ （TypeScript 相對於 JavaScript 的缺點）

您可以將 TypeScript 視為 JavaScript 的擴展，但肯定不是替代品。

對於較小的代碼塊，TypeScript 可能會成為一種開銷——安裝、編譯、反編譯將是多餘的。 使用 JavaScript，您可以簡單地在 HTML 中鍵入您的腳本，它就會起作用。 當您每次更改某些內容時只需刷新瀏覽器時，調試代碼也更容易。

頭對頭比較

現在我們已經了解了 TypeScript 和 JavaScript 的特性和優勢，讓我們進行更多的比較：

結論

從學習的角度來看，JavaScript 可能是你的自然選擇。 您打開一個文件，在<script></script>標籤中輸入一些內容，將其保存為 HTML – 您將看到結果！ 然後，您可以在此基礎上創建更多動態內容。

此外，當您處理大型應用程序時，擁有 JavaScript 知識將幫助您輕鬆轉向 TypeScript。

但是，從職業和薪酬的角度來看，作為 TypeScript 開發人員，您將更加靈活和適應 JS 和 TS 項目——因此絕對是市場上更好的資產。 通常，TypeScript 開發人員的年薪在 11 萬美元至 14.7 萬美元之間，而 JS 開發人員的年薪約為 6.3 萬美元至 11.8 萬美元。