typescript環(huán)境安裝并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件
一、前言
小編最近開始學(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
npm install -g typescript
-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ò)：
error TS18003: No inputs were found in config file
'd:/file-wang/vue/code/test/tsconfig.json'.
Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["./js"]'.
我們不要著急，這是沒有監(jiān)視到ts文件，所以提示的，我們不用管，直接寫一個(gè)ts測(cè)試一下！
四、測(cè)試
1. 編寫ts文件
新建test.ts
(() => {
function helloWord(str:string){
return '這是第一個(gè)ts程序：' + str
}
var text = 'helloword'
console.log(helloWord(text))
})();我們發(fā)現(xiàn)，js文件夾下已經(jīng)給我們編譯成js文件了！
2. 編寫html文件
我們直接引入js文件夾下的js文件！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/test.js"></script>
</body>
</html>3. 瀏覽器測(cè)試
我們?cè)?code>test.html頁面按住快捷鍵：alt + B在瀏覽器打開次html文件
我們F12看看是否輸出了：這是第一個(gè)ts程序：helloword
五、總結(jié)
這樣就完成了基礎(chǔ)的安裝和配置自動(dòng)監(jiān)視ts文件編譯成js文件??！
到此這篇關(guān)于安裝typescript環(huán)境并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件的文章就介紹到這了,更多相關(guān)安裝typescript環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了詳解cordova打包成webapp的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
JavaScript簡單驗(yàn)證表單空值及郵箱格式的方法
這篇文章主要介紹了JavaScript簡單驗(yàn)證表單空值及郵箱格式的方法,涉及javascript基本的表單與字符串操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01
基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼
2022年中秋佳節(jié)即將來臨，中秋節(jié)是我們國家的傳統(tǒng)節(jié)日。而中秋與玉兔又往往會(huì)聯(lián)系在一起，本文將用Threejs做一只會(huì)動(dòng)的3D玉兔，感興趣的可以了解一下2022-08-08
JS簡單限制textarea內(nèi)輸入字符數(shù)量的方法
這篇文章主要介紹了JS簡單限制textarea內(nèi)輸入字符數(shù)量的方法,涉及JavaScript響應(yīng)鼠標(biāo)及鍵盤事件處理textarea輸入框字符的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
2019 年編寫現(xiàn)代 JavaScript 代碼的5個(gè)小技巧(小結(jié))
這篇文章主要介紹了2019 年編寫現(xiàn)代 JavaScript 代碼的5個(gè)小技巧，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
javascript forEach函數(shù)實(shí)現(xiàn)代碼
在Base2中找到一個(gè)叫forEach的函數(shù)，是我見過的最好的實(shí)現(xiàn)。挖出來分析一下。它能對(duì)各種普通對(duì)象，字符串，數(shù)組以及類數(shù)組進(jìn)行遍歷。如果原游覽器的對(duì)象已實(shí)現(xiàn)此函數(shù)，它則調(diào)用原對(duì)象的函數(shù)。2010-01-01
這篇文章主要為大家詳細(xì)介紹了nodejs與javascript中aes加密的相關(guān)資料，感興趣的朋友可以參考一下2016-05-05
這篇文章主要介紹了淺談es6中的元編程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
ECharts事件處理與旭日?qǐng)D實(shí)現(xiàn)
這篇文章介紹了ECharts事件處理與實(shí)現(xiàn)旭日?qǐng)D的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
深入理解JavaScript系列(13) This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實(shí)踐證明，這個(gè)主題很難，在不同執(zhí)行上下文中this的確定經(jīng)常會(huì)發(fā)生問題2012-01-01