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