TypeScript是什麼,為什麼要使用它?

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

原文出處://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語言

雖然這在很大程度上是因為微軟和Google等公司對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:

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函數添加類型以使其僅接受數字類型的變數。

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學習帶來一些幫助。