- typescript是javascript的一個超集(超集簡單來說就是typescript中包含了javascript的所有的能力,且包含了javascript中沒有的功能,因此它是javascript的一個超集,javascript是typescript的一個子集)
對比javascript的優(yōu)勢
- typescript相當(dāng)于就是javascript的一個語法糖,最貼切的例子就是相當(dāng)于css的less和sass,我們知道less和sass是具備了很多css沒有的功能,比如定義函數(shù)、定義混合宏,讓編寫看起來嵌套更明確、更規(guī)范、維護起來更加得心應(yīng)手和高效,其實typescript本質(zhì)上也是如此,只是操作對象變?yōu)榱薺avascript
- 個人理解typescript相當(dāng)于把javascript變相的實現(xiàn)成了一門強類型語言,使定義和操作javascript的行為更加規(guī)范和有跡可循,我們都知道javascript中定義的變量除了ES6中的const外,賦予的值可以是任意類型,這就給我們維護帶來很多不便,因為你可能不經(jīng)意的改變了一個值的類型或者一個不當(dāng)?shù)牟僮鞫鴮?dǎo)致其他重大失誤的發(fā)生,你僅僅是為了維護你當(dāng)前的業(yè)務(wù),但是可能這個值在其他人那里也用到,但是javascript卻不會給你任何提示
- ts語法更加的規(guī)范,所有的操作包括變量的定義,都會在初始化的那一刻規(guī)定,這會為你在開發(fā)過程中省去很多類型判斷
缺點
- 如果說增加了學(xué)習(xí)成本,那么它的確是一個缺點,因為它的確是
- 對于短期內(nèi)開發(fā)來說,會增加開發(fā)成本,因為很多類型都需要去約束,但是長期來說,它減少了維護成本,因為你typescrip的約束性,讓你可以大展拳腳,并且不用小心翼翼的怕弄壞其他的功能,至少把這種可能性降低了
- 集成到構(gòu)建工具需要一定的工作量,tsconfig.json是一個不可忽視的文件
- 對于一個庫可能結(jié)合的不是那么完美
全局安裝Ts
npm install typescript -g

image.png
新建index.ts文件

image.png
執(zhí)行index.ts文件

image.png
編譯
tsc index.ts 如果語法出現(xiàn)錯誤,編譯過程中,ts會提示錯誤信息,但是js文件依然會被編譯,想要阻止編譯,需要在tsconfig.json中進行配置

image.png
如果報錯進制運行腳本

image.png
生成tsconfig.json是必要的,這個可以配置編譯生產(chǎn)的語法,生成tsconfig.json需要打開終端輸入tsc init即可
配置輸出文件目錄

image.png
自動編譯,打開編輯器,菜單欄點擊終端 -> 運行任務(wù) -> 監(jiān)視tsconfig.json就可以完成自動編譯

image.png
自動編譯生成index.js的文件,直接引入html文件即可

image.png
編譯后的JS文件

image.png