在vscode上直接運(yùn)行typescript的操作方法
如何在vscode上直接運(yùn)行typescript
在學(xué)習(xí)typescript的過程中發(fā)現(xiàn)在vscode上不能很好地的輸出typescript的運(yùn)行結(jié)果，需要先將typescript編譯為javascript，在通過node執(zhí)行js文件得到結(jié)果，執(zhí)行過程如下
執(zhí)行準(zhǔn)備操作
1.全局安裝ts-node包
npm install ts-node -g
2.在vscode商店安裝Code Runner插件
點(diǎn)擊右上角運(yùn)行按鈕即可看到輸出控制面板運(yùn)行結(jié)果
3.解決亂碼方案:
設(shè)置 > Extensions，找到 Run Code configuration，勾上 Run In Terminal選項(xiàng)，設(shè)置完可以支持輸入及解決輸出亂碼問題。
補(bǔ)充：
使用vscode編寫并運(yùn)行typescript代碼
1.安裝vsCode
Visual Studio Code - Code Editing. Redefined
2.安裝nodejs
下載 | Node.js 中文網(wǎng)
3.打開vscode，在vscode里面打開終端（快捷鍵是ctrl+~)
查看是否成功安裝node和npm：
node -v
npm -v
在終端中輸入如下命令并運(yùn)行：
npm install -g typescript
檢查是否成功安裝（typescript）的命令：tsc -v
運(yùn)行流程：
手動(dòng)編譯和運(yùn)行ts代碼：
1.編譯 tsc 文件名(包含擴(kuò)展名)
2.運(yùn)行 node 文件名(包含擴(kuò)展名)
vscode 自動(dòng)編譯和運(yùn)行ts代碼：
1.生成配置文件： tsc --init
2.修改配置文件：tsconfig.json ("outDir":"./js" ，“strict":false)
3.啟動(dòng)監(jiān)視任務(wù) ：terminal->run task...->show all task..->tsc:watch - tsconfig.json
運(yùn)行：
快捷鍵：F5或ctrl+F5
選擇： run->star debugging
參考：
typescript從入門到熟練，使用vscode編寫
到此這篇關(guān)于如何在vscode上直接運(yùn)行typescript的文章就介紹到這了,更多相關(guān)vscode運(yùn)行typescript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用JavaScript實(shí)現(xiàn) 鐵甲無敵獎(jiǎng)門人 “開口中”猜數(shù)游戲
JavaScript在常人看來都是門出不了廳堂的小語言，僅管它沒有明星語言的閃耀，但至少網(wǎng)頁的閃耀還是需要它的，同時(shí)它是一門很實(shí)用的語言。2009-10-10
Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決
本文主要介紹了Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
js圖片延遲加載(Lazyload)三種實(shí)現(xiàn)方式
這篇文章主要介紹了js延遲加載(Lazyload)三種實(shí)現(xiàn)方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
JS雙向鏈表實(shí)現(xiàn)與使用方法示例(增加一個(gè)previous屬性實(shí)現(xiàn))
這篇文章主要介紹了JS雙向鏈表實(shí)現(xiàn)與使用方法,在之前鏈表的基礎(chǔ)上增加一個(gè)previous屬性實(shí)現(xiàn)的雙向鏈表功能,需要的朋友可以參考下2019-01-01
KnockoutJS數(shù)組比較算法實(shí)例詳解
這篇文章主要介紹了KnockoutJS數(shù)組比較算法實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于微信小程序登錄的那些事，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
在JavaScript中,為按鈕添加點(diǎn)擊事件監(jiān)聽器是一個(gè)常見的操作,它允許你在用戶點(diǎn)擊按鈕時(shí)執(zhí)行特定的代碼,這篇文章主要介紹了JavaScript的9種點(diǎn)擊方法,需要的朋友可以參考下2025-04-04![[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例](http://img.jbzj.com/images/xgimg/bcimg7.png)
[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例
下面小編就為大家?guī)硪黄猍js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了js兼容火狐獲取圖片寬和高的方法,涉及javascript圖片操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
javascript數(shù)據(jù)庫操作方法包括字符串大小寫，字符串搜索，提取字符串等2008-04-04