1.ts的前言、安裝及編譯

  • 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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容