TypeScript是什么

TypeScript是什么，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

前言：

TypeScript是JavaScript的超集，它可以編譯成純JavaScript代碼。

那為什么會(huì)出現(xiàn)TypeScript這門(mén)語(yǔ)言，主要是因?yàn)楝F(xiàn)在的JavaScript可以開(kāi)發(fā)很多復(fù)雜的項(xiàng)目，但是JavaScript又缺乏其可靠性，在使用的時(shí)候需要我們?yōu)榱舜a的健壯性需要添加很多業(yè)務(wù)邏輯去判斷。

TypeScript可以運(yùn)行在瀏覽器環(huán)境、Node.js環(huán)境或者ECMAScript3或者更高的JavaScript的引擎中。

1.JavaScript的問(wèn)題

JavaScript的問(wèn)題主要有如下幾個(gè)：

JavaScript的類型異常只有在運(yùn)行的時(shí)候才可以發(fā)現(xiàn)。

因?yàn)?code>JavaScript的函數(shù)的類型是不明確的，有可能導(dǎo)致函數(shù)的最終功能導(dǎo)致出現(xiàn)問(wèn)題，

如下這段代碼：

function sum(x, y){
  return x + y
}
sum(100, '100') // 100100

2.TypeScript的優(yōu)勢(shì)

• JavaScript是動(dòng)態(tài)類型的編程語(yǔ)言，所謂的動(dòng)態(tài)類型，就是在編譯時(shí)候時(shí)候才知道其數(shù)據(jù)類型是Number 還是String；而TypeScript是靜態(tài)類型的編程語(yǔ)言，所謂的靜態(tài)類型就是編寫(xiě)的時(shí)候就知道其數(shù)據(jù)類型是什么，比例定義一個(gè)變量

let num: number = 6;

num這個(gè)變量從頭到尾只能是number類型，如果將字符串賦值給他就會(huì)拋出異常。

所以說(shuō)，TypeScript的優(yōu)勢(shì)如下：

• 在開(kāi)發(fā)過(guò)程中，就可以定位的錯(cuò)誤的地方，方便我們檢查錯(cuò)誤。

• TypeScript屬于漸進(jìn)式的編程語(yǔ)言，如果不懂其語(yǔ)法可以完全將其當(dāng)做JavaScript來(lái)用。

• 減少了我們?cè)陂_(kāi)發(fā)過(guò)程中的不必要的類型檢查。

• 靜態(tài)類型的代碼提示是要優(yōu)于靜態(tài)類型代碼提示的。

• 在進(jìn)行項(xiàng)目重構(gòu)的時(shí)候會(huì)更加簡(jiǎn)單。

• 靜態(tài)類型的代碼語(yǔ)義化比動(dòng)態(tài)類型更好，可讀性更好。

3.TypeScript的缺點(diǎn)

TypeScript并不是只有優(yōu)點(diǎn)，沒(méi)有缺點(diǎn)的，它的缺點(diǎn)都是相對(duì)于JavaScript來(lái)說(shuō)，

具體如下幾點(diǎn)：

• 相對(duì)于JavaScript來(lái)說(shuō)，TypeScript本身增加了許多的概念。例如泛型、接口等概念。

• 使用TypeScript開(kāi)發(fā)在短期內(nèi)會(huì)增加一些成本，但是對(duì)于一個(gè)需要長(zhǎng)期維護(hù)的項(xiàng)目，TypeScript能夠減少其維護(hù)成本。

• 可能和一些庫(kù)結(jié)合的不是很完美。

4.TypeScript的運(yùn)行環(huán)境

TypeScript是運(yùn)行是建立在Node.js環(huán)境基礎(chǔ)之上的，所以需要先安裝一下Node.js。

安裝Node.js等一系列操作以忽略

安裝TypeScript的命令如下：

npm install -g typescript@3.6.4

這里我通過(guò)@指定版本號(hào)，也可以不指定版本號(hào)

安裝完TypeScript后，還需要安裝一個(gè)ts-node的工具，如果安裝該工具話是不能直接運(yùn)行TS代碼的，需要將TS的代碼編成JavaScript后才能執(zhí)行。

執(zhí)行流程如下：

# 編譯 TS 代碼
tsc demo.ts 
# 編譯后會(huì)得到 demo.js 文件，然后就可以運(yùn)行了

如果安裝了node-ts工具后，就可以直接執(zhí)行TS代碼了。

具體步驟如下：

# 1. 全局安裝 
npm install -g ts-node@8.4.1
# 2. 運(yùn)行代碼
ts-node demo.ts

值得注意的是安裝之后的目錄一定需要在環(huán)境變量中，不然會(huì)報(bào)錯(cuò)的。

5.作用域問(wèn)題

我們?cè)陧?xiàng)目中執(zhí)行ts文件時(shí)，如果不同文件中存在相同的變量名是會(huì)拋出異常的 ，

示例代碼如下：

a.ts

let str: string = 'Hello World'

b.ts

let str: string = '一碗周'

此時(shí)就會(huì)拋出一個(gè)異常，即無(wú)法重新聲明塊范圍變量“str”，如果編輯器是VScode的話，鼠標(biāo)懸停到變量名會(huì)進(jìn)行提示。

解決這個(gè)問(wèn)題的方式有兩種，第一種是為每個(gè)文件創(chuàng)建一個(gè)立即執(zhí)行函數(shù)（即匿名函數(shù)），保證每個(gè)文件都擁有單獨(dú)的作用域。

示例代碼如下：

(function() {
  let str: string = '一碗周'
}){}

第二種方式是使用export將當(dāng)前文件作為模塊導(dǎo)出。示例代碼如下：

let str: string = '一碗周'

export {}

關(guān)于TypeScript是什么問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。