第typescript環(huán)境安裝并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件目錄一、前言二、安裝typescript環(huán)境三、VSCode配置自動(dòng)監(jiān)視編譯1.新建一個(gè)文件夾2.在終端打開3.初始化配置文件4.編輯配置文件5.開啟自動(dòng)編譯四、測(cè)試1.編寫ts文件2.編寫html文件3.瀏覽器測(cè)試五、總結(jié)

一、前言

小編最近開始學(xué)習(xí)typescript，懂得人都知道，typescript是vue3的基礎(chǔ)伴生，配合更加默契。就像vue2和js一樣！typescript不像js那樣瀏覽器直接可以解讀，需要我們把ts文件編譯成js文件，這樣瀏覽器才可以解讀。所以我們要安裝一下ts的環(huán)境和自動(dòng)編譯，方便我們后續(xù)學(xué)習(xí)，不需要寫完一個(gè)ts文件在手動(dòng)編譯！

二、安裝typescript環(huán)境

必須要有node環(huán)境哈！

win+R輸入cmd

npminstall-gtypescript

-g代表global全局安裝

查看版本

tsc-v

三、VSCode配置自動(dòng)監(jiān)視編譯

1.新建一個(gè)文件夾

2.在終端打開

3.初始化配置文件

tsc--init

4.編輯配置文件

52行修改生成的js文件存放位置為：json文件夾所在目錄的js文件夾下，js不存在會(huì)幫助我們新建！

79行我們關(guān)閉語法檢查，隨意一點(diǎn)哈！（根據(jù)個(gè)人喜好設(shè)置）

5.開啟自動(dòng)編譯

找到終端，點(diǎn)擊運(yùn)行任務(wù)

點(diǎn)擊顯示所有任務(wù)

找到要監(jiān)視的json文件

出現(xiàn)報(bào)錯(cuò)：

errorTS18003:Noinputswerefoundinconfigfile

d:/file-wang/vue/code/test/tsconfig.json.

Specifiedincludepathswere[**/*]andexcludepathswere[./js].

我們不要著急，這是沒有監(jiān)視到ts文件，所以提示的，我們不用管，直接寫一個(gè)ts測(cè)試一下！

四、測(cè)試

1.編寫ts文件

新建test.ts

(()={

functionhelloWord(str:string){

return'這是第一個(gè)ts程序：'+str

vartext='helloword'

console.log(helloWord(text))

})();

我們發(fā)現(xiàn)，js文件夾下已經(jīng)給我們編譯成js文件了！

2.編寫html文件

我們直接引入js文件夾下的js文件！

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

/head

body

scriptsrc="./js/test.js"/script

/body

/html

3.瀏覽器測(cè)試

我們?cè)趖est.html頁面按住快捷鍵：alt+B在瀏覽器打開次html文件