技術文章 » TypeScript是什麼，爲什麼要使用它？

TypeScript是什麼，爲什麼要使用它？

2020-08-14 11:06:38

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

原文出處：https://medium.com/swlh/what-is-typescript-bf333e23f259

 

從歷史上看，JavaScript已經成爲了在Internet上編寫網頁和應用程式指令碼語言的主要語言。但是否能通過JavaScript建立大型複雜Web應用系統呢？可能那麼容易。

不過值得慶幸的是，我們還有一個解決方案TypeScript。

在過去的幾年中，TypeScript的受歡迎程度一直在增長。在2020年最有前途的五種語言中，它也是其中之一。目前最大的前端框架之一的Angular正在使用TypeScript，而在大約60％的前端程式設計師正在使用或曾使用過TypeScript，而另外22％的開發者希望嘗試使用。

在本文中，我們將向您介紹TypeScript，並引導您開始向JavaScript程式碼新增型別。

以下是我們本文中要介紹的一些要點：

  • 什麼是TypeScript？
  • 什麼是型別，它們在TypeScript中如何工作？
  • JavaScript與TypeScript：選擇哪一個？
  • 如何開始使用TypeScript
  • 有關學習TypeScript的更多資源

什麼是TypeScript？

簡而言之，TypeScript是JavaScript的超集，具有可選的型別並可以編譯爲純JavaScript。從技術上講TypeScript就是具有靜態型別的 JavaScript 。

 

 

那麼，向JavaScript新增靜態型別的原因是什麼？

我想原因至少有三個：

  • 您可以避免經典的錯誤 'undefined' is not a function.
  • 在不嚴重破壞程式碼的情況下，重構程式碼更容易。
  • 使大型、複雜的應用程式原始碼更易閱讀。

實際上，一項研究表明，TypeScript可以檢測到所有JavaScript錯誤的15％。

動態型別的自由特性經常會導致錯誤，這些錯誤不僅會降低程式設計師的工作效率，而且還會由於增加新程式碼行的成本增加而使開發陷入停頓。

因此，JavaScript無法合併型別以及編譯時缺乏錯誤檢查，使它不適合作爲企業和大型程式碼庫中伺服器端程式碼。

我需要學習什麼才能 纔能使用TypeScript？

TypeScript本質上是一個JS linter。

因此，與其他語言（例如CoffeeScript（新增語法糖）或PureScript（完全不像JavaScript））不同，TypeScript和JavaScript語法沒有明顯的區別，意味着你無需學習很多知識就可以開始無縫編寫TypeScript程式碼。

TypeScript中的型別是可選的，並且每個JavaScript檔案都是有效的型別指令碼檔案。儘管如果初始檔案中存在型別錯誤，編譯器會發出警告，但編譯器仍然會給您返回一個正常的JavaScript檔案。

 

在前端還是後端使用TypeScript？

TypeScript可以被編譯爲JavaScript。因此，TypeScript可以在任何可以使用JavaScript的地方使用：包括前端和後端。

JavaScript是用於爲應用程式和網頁的前端實現指令碼的最流行的語言。因此，TypeScript可以用於相同的目的，但是它在伺服器端的複雜企業專案中很有用。

JavaScript本是爲應用程式和網頁前端等用戶端開發時的語言而設計。所以，TypeScript也同樣可以用於完全相同的目的，但在複雜企業專案中的伺服器端的表現更令它大放異彩。

什麼是型別，它們在TypeScript中如何工作？

型別簡介

型別是在我們執行程式之前通過在程式碼中描述我們計劃如何使用數據來區分正確程式的方法。它們可以從簡單的型別(如數位和字串) 到爲我們的問題域完美建模的複雜結構。

程式語言分爲兩類：靜態型別或動態型別。

在使用靜態型別的語言中，變數的型別在編譯時必須是已知的。如果我們宣告一個變數，編譯器應該知道(或可推斷) 該變數是數位、字串或布爾值。

在動態型別的語言中，這不一定是這樣。只有在執行程式時才知道變數的型別。

TypeScript可以支援靜態型別，而JavaScript不支援。

TypeScript的型別

TypeScript具有多種基本型別，例如Boolean，Number，String，Array，Tuple等。您可以在TypeScript文件中瞭解有關它們的更多資訊。

除了這些，我們還希望介紹其他一些型別來展示TypeScript的表達能力：

any和unknown

雖然any作爲型別可以涵蓋您想要的任何內容，但unknown是其型別安全的對應物件。

每當你想要跳脫型別時，any都允許你將任何JavaScript變數賦給它。它經常用於對尚未檢查且型別未知的傳入變數時。

UNKNOWN與ANY非常相似，但是在顯式型別檢查之前，它不允許您對變數執行任何操作。

Void

void在沒有返回值時使用，例如，用作不返回任何值的函數的返回型別。

Never

Never 型別表示的是那些永不存在的值的型別，例如將引發異常的函數。

Intersection & Union 型別

交叉型別（Intersection Types）可以將幾種基本型別合併爲同一種型別。例如，您可以建立具有name：string和phone_number：number的自定義型別Person。

聯合型別（Union Types）表示可以採用多個基本型別其中之一。我們用豎線（ |）分隔每個型別，所以number | string | boolean表示一個值可以是number，string，或boolean。

 

 

TypeScript中的型別可以是隱式的也可以是顯式的。如果您未明確編寫型別，則編譯器將使用型別推斷來推斷您正在使用的型別。

但是，顯式地編寫它們會帶來很多好處，例如幫助其他開發人員閱讀您的程式碼，並確保您所看到的就是編譯器所看到的。

TypeScript vs. JavaScript

讓我們看一下以下這個圖表：

 

 

在2020年第一季度的GitHub拉取請求中，TypeScript從無到有地排在第7位，高於PHP和C語言。

雖然這在很大程度上是因爲微軟和谷歌等公司對TypeScript的支援，但支援它是有充分的理由的。

選擇TypeScript而非JavaScript的3個原因

  1. TypeScript更可靠

與JavaScript相比，TypeScript程式碼更可靠、更容易重構。這使開發人員可以更輕鬆地避免錯誤並進行重寫。

型別的定義和編譯器的引入，可使你避免掉程式碼中的大多數愚蠢錯誤。

  1. TypeScript更清晰

顯式型別使我們程式碼可讀性更高，所以我們的注意力將會更集中在我們的系統究竟是如何構建的，以及系統的不同部分如何相互作用。在大型系統中，能夠在記住上下文的同時抽象出系統的其餘部分是很重要的。型別的定義使我們能夠做到這一點。

  1. TypeScript和JavaScript實際上是可以互換的，何樂而不爲呢？

由於JavaScript是TypeScript的子集，因此您可以在TypeScript程式碼中使用您想要的所有JavaScript庫和程式碼。

TypeScript快速入門指南

TypeScript編譯器

要編譯您的TypeScript程式碼，您需要安裝tsc（TypeScript編譯器的縮寫）。最簡單的方法是通過npm使用以下命令輕鬆完成此操作：

npm install -g typescript

如果要在VS Code中使用TypeScript，你能夠在其網站上找到相應的指南。

安裝完成後tsc，您可以使用命令編譯檔案tsc filename.ts。

將檔案從JavaScript遷移到TypeScript

假設我們要將以下JavaScript程式碼更改爲TypeScript：

1

2

3

4

5

function   my_sum(a, b) {

      return   a + b;

      } let   a = 4; 

let   b =  "5" ;  

my_sum(a, b);

　　

從技術上講，任何JavaScript檔案都可以是TypeScript檔案，因此您只需將副檔名從.js切換到.ts即可。

TypeScript具有型別推斷功能，這意味着它可以自動推斷您使用的某些型別。但如果只想對數位求和，則可以對my_sum函數新增型別以使其僅接受數位型別的變數。

1

2

3

4

5

6

function   my_sum(a: number, b: number) {

      return   a + b;

}

let   a = 4; 

let   b = 5;  

my_sum(a, b);

如何在瀏覽器中使用TypeScript？

要在瀏覽器中執行TypeScript，需要使用TypeScript編譯器（tsc）將其轉換爲JavaScript。在這種情況下，請tsc根據.ts程式碼建立一個新的.js檔案，您可以使用使用JavaScript檔案的任何方式使用該檔案。

進一步學習的資源

TypeScript深入研究

這個免費的Web資源提供了您從TypeScript開始所需的一切，包括我們已經在此處介紹的部分的更詳細的說明。

從頭開始學習TypeScript！

這是一門實用的3小時課程，涵蓋TypeScript的所有基本功能，如何使用它與某些JavaScript框架進行互動以及在編寫JavaScript時如何利用TypeScript的功能。

結論

總體而言，TypeScript是一個很好的工具，即使您沒有使用過它，也可以將其納入你的學習計劃中。從點滴開始學起，慢慢的你就會很快上手的，因爲TypeScript的學習曲線對初學者非常友好，所以你無需擔心。最後，希望本文對你的TypeScript學習帶來一些幫助。