如何在vscode中使用Typescript并運行詳解
更新時間：2023年05月30日 09:42:51 作者：suoh's?Blog
在VSCode中編寫的TypeScript代碼不能直接運行,需要先用tsc編譯為JavaScript,然后才能運行,下面這篇文章主要給大家介紹了關于如何在vscode中使用Typescript并運行的相關資料,需要的朋友可以參考下
首先呢，我們在學習ts之前，需要先安裝ts
1、安裝 typescript
npm install -g typescript //檢查是否安裝 tsc -v
?2、生成配置文件，cd進入該文件夾，在控制臺輸
tsc --init
此時我們就可以看到在ts文件夾下面出現了 一個tsconfig.json的文件
?3、編譯ts文件
（1）第一種方法可以直接通過命令編譯
例如我們創(chuàng)建一個test.ts文件，可以在控制臺 輸入tsc +文件名 進行編譯
tsc test.ts
當然這個操作就比較繁瑣了，那就考慮第二種方式了
（2）vscode自動化編譯ts文件
由于瀏覽器是識別不了ts文件的，因此編譯的過程就是將ts文件編譯為js文件。
如何設置呢？
第一二步如下
?第三步，點擊終端中的運行任務
?看下效果，此時我們新建一個demo.ts，控制臺就會自動監(jiān)視運行
?并在js文件夾中自動生成了對應的demo.js文件
?此時我們對比一下，就達到了預期的目標。
?注意：當然第三步中運行任務 還有一個更簡便的方法，可以在該ts目錄下直接運行 tsc -w 即可運行該文件夾下所有ts文件
如何在控制臺直接運行ts，并可查看打印等輸出內容
1、在vscode中安裝插件 Code Runner
2、安裝ts包
npm i typescript ts-node @types/node@* -g
3、點擊文件右上角的運行按鈕即可
此時就可以開啟ts的學習之路了~
總結
到此這篇關于如何在vscode中使用Typescript并運行的文章就介紹到這了,更多相關vscode使用Typescript并運行內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript中substring()函數方法是返回位于String對象中指定位置的子字符串2013-04-04
這篇文章主要介紹了基于javascript編寫簡單日歷的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了JavaScript中實現下載超大文件的相關方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要介紹了JS從數組中隨機獲取一個值的常用寫法,需要的朋友可以參考下2023-07-07
js實現頁面跳轉的幾種方式，需要的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細介紹了使用JavaScript實現時間格式的切割與轉換的相關知識,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下2024-04-04
有些時候我們需要把網站頁面變成黑白色或灰色，特別是對于一些需要悼念的日子，以及一些影響力很大的偉人逝世或紀念日的時候，都會讓網站的全部網頁變成灰色（黑白色），以表示我們對逝者或者英雄的緬懷和悼念2022-12-12
本篇文章主要介紹了JavaScript實現左右下拉框動態(tài)增刪示例，可以對下拉框進行刪除和增加，非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了微信小游戲中three.js離屏畫布的示例代碼,主要是用three.js結合cannon.js寫個3D小游戲，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了javascript的基本包裝類型，JS為了便于操作基本類型,提供了3個特殊的引用類型:Boolean/Number和String,需要的朋友可以參考下2015-04-04