如何在vscode中使用Typescript并運(yùn)行詳解
首先呢，我們?cè)趯W(xué)習(xí)ts之前，需要先安裝ts
1、安裝 typescript
npm install -g typescript //檢查是否安裝 tsc -v
?2、生成配置文件，cd進(jìn)入該文件夾，在控制臺(tái)輸
tsc --init
此時(shí)我們就可以看到在ts文件夾下面出現(xiàn)了 一個(gè)tsconfig.json的文件
?3、編譯ts文件
（1）第一種方法可以直接通過(guò)命令編譯
例如我們創(chuàng)建一個(gè)test.ts文件，可以在控制臺(tái) 輸入tsc +文件名 進(jìn)行編譯
tsc test.ts
當(dāng)然這個(gè)操作就比較繁瑣了，那就考慮第二種方式了
（2）vscode自動(dòng)化編譯ts文件
由于瀏覽器是識(shí)別不了ts文件的，因此編譯的過(guò)程就是將ts文件編譯為js文件。
如何設(shè)置呢？
第一二步如下
?第三步，點(diǎn)擊終端中的運(yùn)行任務(wù)
?看下效果，此時(shí)我們新建一個(gè)demo.ts，控制臺(tái)就會(huì)自動(dòng)監(jiān)視運(yùn)行
?并在js文件夾中自動(dòng)生成了對(duì)應(yīng)的demo.js文件
?此時(shí)我們對(duì)比一下，就達(dá)到了預(yù)期的目標(biāo)。
?注意：當(dāng)然第三步中運(yùn)行任務(wù) 還有一個(gè)更簡(jiǎn)便的方法，可以在該ts目錄下直接運(yùn)行 tsc -w 即可運(yùn)行該文件夾下所有ts文件
如何在控制臺(tái)直接運(yùn)行ts，并可查看打印等輸出內(nèi)容
1、在vscode中安裝插件 Code Runner
2、安裝ts包
npm i typescript ts-node @types/node@* -g
3、點(diǎn)擊文件右上角的運(yùn)行按鈕即可
此時(shí)就可以開(kāi)啟ts的學(xué)習(xí)之路了~
總結(jié)
到此這篇關(guān)于如何在vscode中使用Typescript并運(yùn)行的文章就介紹到這了,更多相關(guān)vscode使用Typescript并運(yùn)行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ES6（ECMAScript 6,也稱為ES2015）是JavaScript的一個(gè)重要更新版本,引入了許多新的語(yǔ)言特性和改進(jìn),使得JavaScript變得更加現(xiàn)代化、易讀、易維護(hù)和更適合大型應(yīng)用程序的開(kāi)發(fā),ES6的主要變化歸納為：語(yǔ)法糖、新機(jī)制、更好的語(yǔ)義、更多的內(nèi)置對(duì)象和方法2023-11-11
unapp微信小程序轉(zhuǎn)發(fā)分享及攜帶參數(shù)的2種方式
這篇文章主要給大家介紹了關(guān)于unapp微信小程序轉(zhuǎn)發(fā)分享及攜帶參數(shù)的2種方式,我們?cè)谖⑿判〕绦蛑薪?jīng)常會(huì)使用到分享商品海報(bào),或者是重繪微信小程序分享鏈的圖片功能,需要的朋友可以參考下2023-11-11
使用Vite創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)的前端項(xiàng)目
這篇文章主要介紹了使用Vite創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)的前端項(xiàng)目,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-06-06
Javascript實(shí)現(xiàn)的CSS代碼高亮顯示
到網(wǎng)上一位別出心裁的高手使用字符串而不是正則表達(dá)式實(shí)現(xiàn)了Javascript代碼高亮顯示，自己受益匪淺，于是就構(gòu)思了CSS代碼的高亮顯示。2009-11-11
通過(guò)url傳遞參數(shù)是我們?cè)陂_(kāi)發(fā)中經(jīng)常用到的一種傳參方法,下面這篇文章主要給大家介紹了關(guān)于前端JS獲取URL參數(shù)的4種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
處于安全上的考慮，input[type="file"] 的文件選擇按鈕樣式并不能隨意修改(不過(guò)可以修改input 的透明度)，可能會(huì)跟設(shè)計(jì)師的設(shè)計(jì)格格不入，這時(shí)可以使用透明效果來(lái)自定義上傳按鈕2012-12-12
jQuery右下角旋轉(zhuǎn)環(huán)狀菜單特效代碼
jquery實(shí)現(xiàn)右下角旋轉(zhuǎn)環(huán)形菜單特效代碼，是固定在頁(yè)面右下角位置，當(dāng)用戶點(diǎn)擊了主菜單按鈕后，子菜單項(xiàng)會(huì)以環(huán)狀旋轉(zhuǎn)進(jìn)入頁(yè)面，并使用animate.css制作動(dòng)畫效果，有需要的朋友可以參考下2015-08-08
基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
javascript獲取鼠標(biāo)點(diǎn)擊元素對(duì)象(示例代碼)
本篇文章主要介紹了利用javascript獲取鼠標(biāo)點(diǎn)擊元素對(duì)象的示例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
js判斷瀏覽器類型及設(shè)備（移動(dòng)頁(yè)面開(kāi)發(fā)）
這篇文章主要介紹了js判斷瀏覽器類型及設(shè)備（移動(dòng)頁(yè)面開(kāi)發(fā)）,需要的朋友可以參考下2015-07-07