typescript環(huán)境安裝并開啟VSCode自動監(jiān)視編譯ts文件為js文件
一、前言
小編最近開始學(xué)習(xí)typescript，懂得人都知道，typescript是vue3的基礎(chǔ)伴生，配合更加默契。就像vue2和js一樣！typescript不像js那樣瀏覽器直接可以解讀，需要我們把ts文件編譯成js文件，這樣瀏覽器才可以解讀。所以我們要安裝一下ts的環(huán)境和自動編譯，方便我們后續(xù)學(xué)習(xí)，不需要寫完一個ts文件在手動編譯！
二、安裝typescript環(huán)境
必須要有node環(huán)境哈！
win + R 輸入cmd
npm install -g typescript
-g代表global全局安裝
查看版本
tsc -v
三、VSCode配置自動監(jiān)視編譯
1. 新建一個文件夾
2. 在終端打開
3. 初始化配置文件
tsc --init
4. 編輯配置文件
52行修改生成的js文件存放位置為：json文件夾所在目錄的js文件夾下，js不存在會幫助我們新建！
79行我們關(guān)閉語法檢查，隨意一點哈！（根據(jù)個人喜好設(shè)置）
5. 開啟自動編譯
找到終端，點擊運行任務(wù)
點擊顯示所有任務(wù)
找到要監(jiān)視的json文件
出現(xiàn)報錯：
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文件，所以提示的，我們不用管，直接寫一個ts測試一下！
四、測試
1. 編寫ts文件
新建test.ts
(() => {
function helloWord(str:string){
return '這是第一個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. 瀏覽器測試
我們在test.html頁面按住快捷鍵：alt + B在瀏覽器打開次html文件
我們F12看看是否輸出了：這是第一個ts程序：helloword
五、總結(jié)
這樣就完成了基礎(chǔ)的安裝和配置自動監(jiān)視ts文件編譯成js文件?。?/p>
到此這篇關(guān)于安裝typescript環(huán)境并開啟VSCode自動監(jiān)視編譯ts文件為js文件的文章就介紹到這了,更多相關(guān)安裝typescript環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js中foreach是用于遍歷數(shù)組的方法,將遍歷到的元素傳遞給回調(diào)函數(shù),遍歷的數(shù)組不能是空的要有值,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach的錯誤用法,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)上傳文件添加和刪除文件選擇框 ,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
大家好，本篇文章主要講的是JavaScript優(yōu)雅處理對象的6種方法，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下哦，方便下次瀏覽2021-12-12
這篇文章主要介紹了微信小程序常用的3種提示彈窗實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了JavaScript簡易購物車功能的編寫代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
axios params 和 data 的區(qū)別小結(jié)
本文介紹了在前端開發(fā)中使用Axios發(fā)送HTTP請求時,params和data的區(qū)別及其應(yīng)用場景,具有一定的參考價值,感興趣的可以了解一下2025-03-03
js關(guān)閉模態(tài)窗口刷新父頁面或跳轉(zhuǎn)頁面
點擊按鈕時，彈出B窗口（模態(tài)）。在B窗口中添加數(shù)據(jù)，提交后，要求B窗口自關(guān)閉，然后刷新A窗口（父），需要的朋友可以了解下2012-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)電子時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了js自定義鼠標(biāo)右鍵的實現(xiàn)原理及源碼,需要的朋友可以參考下2014-06-06
JavaScript原始數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細講講Symbol的使用，需要的可以參考一下2022-11-11