快捷導(dǎo)航

在vscode上直接運(yùn)行typescript的操作方法

更新時(shí)間：2023年12月05日 15:03:24 作者：囂張農(nóng)民

在學(xué)習(xí)typescript的過程中發(fā)現(xiàn)在vscode上不能很好地的輸出typescript的運(yùn)行結(jié)果,需要先將typescript編譯為javascript,在通過node執(zhí)行js文件得到結(jié)果,這篇文章給大家介紹如何在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