一文了解什么是TypeScript?
前言:
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
的類(lèi)型異常只有在運(yùn)行的時(shí)候才可以發(fā)現(xiàn)。
因?yàn)?code>JavaScript的函數(shù)的類(lèi)型是不明確的,有可能導(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)類(lèi)型的編程語(yǔ)言,所謂的動(dòng)態(tài)類(lèi)型,就是在編譯時(shí)候時(shí)候才知道其數(shù)據(jù)類(lèi)型是Number 還是String;而TypeScript
是靜態(tài)類(lèi)型的編程語(yǔ)言,所謂的靜態(tài)類(lèi)型就是編寫(xiě)的時(shí)候就知道其數(shù)據(jù)類(lèi)型是什么,比例定義一個(gè)變量
let num: number = 6;
num
這個(gè)變量從頭到尾只能是number
類(lèi)型,如果將字符串賦值給他就會(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ò)程中的不必要的類(lèi)型檢查。
- 靜態(tài)類(lèi)型的代碼提示是要優(yōu)于靜態(tài)類(lèi)型代碼提示的。
- 在進(jìn)行項(xiàng)目重構(gòu)的時(shí)候會(huì)更加簡(jiǎn)單。
- 靜態(tài)類(lèi)型的代碼語(yǔ)義化比動(dòng)態(tài)類(lè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?的文章就介紹到這了,更多相關(guān)TypeScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS數(shù)組方法some、every和find的使用詳情
這篇文章 要給大家介紹的是JS數(shù)組方法some、every和find的使用的一些相關(guān)資料,感興趣的小伙伴一起來(lái)學(xué)習(xí)吧2021-09-09Javascript 常見(jiàn)的高階函數(shù)詳情
這篇文章主要介紹了Javascript 常見(jiàn)的高階函數(shù)的相關(guān)資料,高階函數(shù),英文叫 Higher Order function。一個(gè)函數(shù)可以接收另外一個(gè)函數(shù)作為參數(shù),這種函數(shù)就叫做高階函數(shù),需要的朋友可以參考一下2021-09-09TypeScript實(shí)用技巧?Nominal?Typing名義類(lèi)型詳解
這篇文章主要為大家介紹了TypeScript實(shí)用技巧?Nominal?Typing名義類(lèi)型詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09在微信小程序中渲染HTML內(nèi)容3種解決方案及分析與問(wèn)題解決
在開(kāi)發(fā)微信小程序時(shí)我們會(huì)在小程序內(nèi)加入純HTML代碼,且HTML中包括圖片,視頻,甚至是事件,微信小程序?yàn)槲覀兲峁┝?種解決方法,但它們的功能與實(shí)現(xiàn)方式與最終效果并不理想2020-01-01js前端表單數(shù)據(jù)處理表單數(shù)據(jù)校驗(yàn)
這篇文章主要為大家介紹了js前端表單數(shù)據(jù)處理表單數(shù)據(jù)校驗(yàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07