JavaScript >> Javascript 文檔 >  >> Tags >> TypeScript

TypeScript 與 JavaScript – 有什麼區別以及您應該使用哪個?

本文將討論 typescript 和 JavaScript 之間的區別,它們解決的問題,以及最好使用哪個。

我真的很喜歡 TypeScript,而且我經常使用它。它解決了 JavaScript 的許多問題,讓編寫好的 JavaScript 代碼變得更加容易(一旦你學會了使用 TypeScript )。

所以,這篇文章更多地是關於你為什麼應該 使用 TypeScript(何時可以使用)、何時/何地可以使用,以及它解決的問題。

本文與以下文章相得益彰,為您概述了一系列以 Web 為中心的編程語言:

JavaScript 和 Node.js 有什麼區別?我應該使用哪個?

為您的項目在 PHP 和 JavaScript 之間進行選擇

什麼是 JavaScript?

JavaScript 於 1990 年代中期開始作為一種腳本語言用於為網頁添加交互性。

隨著時間的推移,它已經發展成為一種功能齊全的編程語言,甚至可以在網絡瀏覽器之外運行(在我們的 Node.js 文章中有更多詳細信息)。

什麼是“類型”?

在計算機編程中,變量 存儲信息——一個值或值的集合,我們將其稱為數據 .

數據 可以是任何東西——一個數字、一個單詞、一個句子、一個日期——它甚至可以表示一個完整的對像以及將其描述為單個字段的屬性,所有這些都存儲在一個變量中 .

變量有一個類型 – 一個數字、一個單詞、一個句子、一個日期 – 所有這些都可以被視為變量的類型 .

類型 變量的值告訴編程語言可以用變量做什麼。數字可以賦值和相乘,日期可以賦值日期,天數或小時數可以加等。

眾所周知,JavaScript 鬆散 打字。你幾乎可以用任何類型的變量做任何事情。這導致了意想不到的結果——在數學方程式中被解釋為數字的詞是最常見的詞之一。這使得 JavaScript 對於復雜的應用程序變得笨拙。

那麼什麼是 TypeScript?

打字稿 是一個超集 JavaScript 的。它增加了嚴格 類型化——強制執行哪些值可以分配給變量,以及可以做些什麼來使代碼更可靠,並添加許多其他改進,以使 JavaScript 更好地構建複雜的應用程序。

超集 意味著它為 JavaScript 添加了功能,同時仍與現有的 Javascript 代碼兼容。 這樣想——所有的 JavaScript 特性也是 TypeScript 的特性,但是 JavaScript 不包含添加到 TypeScript 的特性。

Typescript 代碼已編譯 在運行之前。它編譯(或轉換)成常規的舊 JavaScript——使其與現有的 JavaScript 兼容環境兼容,例如 Web 瀏覽器和 Node.js。

基本上,它使 JavaScript 變得更好,並且可以在 JavaScript 已經運行的任何地方運行。 很酷的東西 .

TypeScript 解決了哪些問題(為什麼要使用它)?

強類型

鍵入限制了您可以對不同類型的變量執行的操作,但這不是限制!

這只是意味著您不能濫用變量。它會阻止您為應該是數字的變量提供字符串值。這樣可以減少錯誤並消除很多容易犯錯誤的機會。

自定義類型

大多數編程語言都沒有汽車 類型,但您可以定義自己的類型,其中包含您可能希望存儲的汽車的所有方面。

您可以創建一個類型 存儲汽車的顏色、品牌、年份或型號等信息,分配所有者,或將您自己的函數添加到定義汽車類型的類 .

您可以更進一步,為您的自定義類型添加輔助函數和方法——這些可以在 car 的任何變量上運行 在應用程序的任何位置鍵入。

簡單易讀

TypeScript 讓您可以非常輕鬆地將代碼拆分為單獨的文件,因此您的自定義汽車 type 可以存在於它自己的單獨文件中——無需通過長文件來查找和修改它。

強制類型化意味著您知道變量是什麼以及可以用它做什麼。 起絨 ,掃描代碼以查找錯誤的過程,將突出顯示變量的濫用(例如,嘗試用字符串進行數學運算)。

ECMA 腳本 6 (ES6)

“JavaScript” 並不是編程語言的正式名稱——它更像是一個品牌,但它已成為 ECMA Script(該語言的醜陋官方名稱)的常用術語。 TypeScript 支持並鼓勵使用 ECMA Script 版本 6 的所有最新功能。

鼓勵最佳實踐

TypeScript 鼓勵您構建應用程序並正確使用類型——幫助您構建更好的應用程序。

結構良好的應用程序是自記錄的——如果代碼易於閱讀,其意圖就很明確,並且您必須編寫更少的註釋來解釋它的作用。

結構良好的應用程序也不易出錯 - 節省您的時間。

我在哪裡可以使用 TypeScript / 誰在使用 TypeScript?

  • 角度
    • Angular 是使用 Angular 框架構建的 Google 開發的框架,Google 使用它來構建他們的許多移動應用程序。
  • 離子
    • 基於 Angular 構建,Ionic 對其進行了擴展,並添加了許多易於使用的組件和工具,使移動開發更易於訪問。
  • 微軟
    • 微軟實際上是整個 TypeScript 項目的牧羊人。他們領導了它的開發,他們的 Visual Studio 編程套件是編寫 TypeScript 的最佳環境之一(它在 Linux 上運行!?)
  • 鬆弛
    • 流行的商業消息傳遞平台 Slack 使用 TypeScript 構建他們的聊天客戶端
  • 我!
    • 我使用 TypeScript 構建了一些非常大的項目,a) 絕對不可能用純 JavaScript 和 b) 可靠地構建 會導致完全無法理解 , 臃腫的代碼庫,如果不是因為 TypeScript 鼓勵我正確地構建我的代碼。

如何開始?

由於 TypeScript 需要編譯,因此在使用它進行開發時需要一些額外的步驟。

還有一點學習曲線——在你已經知道的 JavaScript 之上學習一些新的實踐和語法。

最好的入門方法之一是使用 Ionic 框架。

https://ionicframework.com/

安裝後,Ionic 框架會設置一個完整的移動應用程序開發環境,可以為移動和桌面操作系統(包括 Linux!)構建應用程序。

Ionic 文檔非常詳盡,引導您完成簡單和復雜移動應用程序的開發過程。而且因為它都是用 TypeScript 編寫的,所以您將在學習構建完整應用程序的同時學習 TypeScript。


Tutorial JavaScript 教程
  1. 使用 Golang、Gin 和 React 的 Web 應用程序開髮指南

  2. HostListener 使用方法

  3. 創建自定義 React Hooks:useConfirmTabClos​​e

  4. 如何使用 Angular 和 RxJS 創建紙牌匹配遊戲

  5. Skimr:內幕

  6. JavaScript 對象的動態深度設置

  7. 使用 Insomnia 升級依賴 — 充滿信心

  1. 如何從 Node.js 中的函數訪問 Map 的返回值以獲取 Cloud Function?

  2. React 應用的 CLEAN 架構

  3. 僅使用 ES5 特性創建 React 組件

  4. 在 AWS Lambda 上部署 Next.js

  5. Laravel 中的數據表服務器端自定義搜索/過濾器

  6. 如何將圖像添加到 HTML 畫布

  7. Javascript有用的數組函數:map、filter、find和reduce

  1. 基於表格的計算機輔助軟件開發 (CASD) #1

  2. React 中的簡易暗模式(和多種顏色主題!)

  3. 具有 NextJS 和 GraphQL 的全棧 Web 應用程序

  4. 網絡分析的狀態📊