轉載請注明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者,
原文出處: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個原因
- TypeScript更可靠
與JavaScript相比,TypeScript代碼更可靠、更容易重構,這使開發人員可以更輕松地避免錯誤并進行重寫,
型別的定義和編譯器的引入,可使你避免掉代碼中的大多數愚蠢錯誤,
- TypeScript更清晰
顯式型別使我們代碼可讀性更高,所以我們的注意力將會更集中在我們的系統究竟是如何構建的,以及系統的不同部分如何相互作用,在大型系統中,能夠在記住背景關系的同時抽象出系統的其余部分是很重要的,型別的定義使我們能夠做到這一點,
- 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學習帶來一些幫助,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/5451.html
標籤:JavaScript
