TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟
前言:要想搭建TypeScript,那么就要有npm,要想有cnpm,那么就得有node環(huán)境。要是都有了的話,那么接下來(lái),往下看。
TypeScript環(huán)境搭建
第一步:下載淘寶鏡像
先檢查自己有沒(méi)有成功安裝npm

有npm還不行,還要下載cnpm,命令如下(直接復(fù)制粘貼):
npm install -g cnpm --registry=https://registry.npm.taobao.org
下載好之后,會(huì)顯示成這樣。

第二步:下載TypeScript
在命令窗口輸入(直接復(fù)制粘貼):
npm install -g typescript
下載好了是這樣。

查看版本號(hào):
tsc -v
這樣ts就完全整好了。

部署到VSCode
先創(chuàng)建一個(gè)文件夾tsDemo,
在tsDemo文件夾下創(chuàng)建一個(gè)demo.ts文件,寫(xiě)上內(nèi)容。。
接著,在命令窗口上跳轉(zhuǎn)到該tsDemo文件夾位置上,

然后需要在這個(gè)位置上生成一個(gè)tsconfig.json文件。
直接復(fù)制這個(gè)命令:
tsc --init
然后就會(huì)在tsDemo文件夾下生成tsconfig.json文件。
修改tsconfig.json配置
把tsDemo文件夾拖拽到vsCode上去。,找到tsconfig.json,
把我選中的這一行的注釋去掉,保存,

然后選中ts文件,點(diǎn)擊:終端=>運(yùn)行生成任務(wù)。點(diǎn)擊tsc:監(jiān)聽(tīng)

接著就會(huì)在終端生成js文件夾,里面有由ts文件編譯生成好的js文件。
大功告成,給自己鼓掌啊🎉🎉🎉

可能會(huì)遇到的報(bào)錯(cuò)
tsc : 無(wú)法加載文件 C:\Users\JMQ\AppData\Roaming\npm\tsc.ps1,
因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本。有關(guān)詳細(xì)信息,請(qǐng)參閱
https:/go.microsoft.co m/fwlink/?LinkID=135170 中的 about_Execution_Policies。
解決方法:
以管理員身份運(yùn)行vscode。

然后輸入在終端輸入:
set-executionpolicy remotesigned
就不會(huì)報(bào)錯(cuò)了
ps:下面看下vscode 執(zhí)行typescript文件的方法。
1、在vscode 控制臺(tái) 執(zhí)行 tsc xxx.ts 命令轉(zhuǎn)換成 xxx.js



2、執(zhí)行 node xxx.ts 會(huì)輸出結(jié)果

到此這篇關(guān)于TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟的文章就介紹到這了,更多相關(guān)TypeScript環(huán)境搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript給數(shù)組添加元素的6個(gè)方法
本文主要介紹了JavaScript給數(shù)組添加元素的6個(gè)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
JS 中LocalStorage和SessionStorage的使用
最近因?yàn)轫?xiàng)目上需要使用到客戶端存儲(chǔ),所以稍微研究了一下,以下說(shuō)說(shuō)自己的理解和使用經(jīng)驗(yàn),特此分享到腳本之家平臺(tái),感興趣的朋友參考下吧2017-08-08
JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法
這篇文章主要介紹了JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法,涉及javascript中Math.Min方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
如何使用JS獲取世界不同時(shí)區(qū)的當(dāng)前時(shí)間
文章介紹了在前端開(kāi)發(fā)中使用JavaScript獲取不同時(shí)區(qū)當(dāng)前時(shí)間的幾種方法,文章還提醒開(kāi)發(fā)者要注意國(guó)際化和本地化最佳實(shí)踐,并進(jìn)行充分的測(cè)試以確保代碼在不同環(huán)境和時(shí)區(qū)中的正確性,感興趣的朋友一起看看吧2024-12-12
JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
如何在uni-app使用微軟的文字轉(zhuǎn)語(yǔ)音服務(wù)
有了語(yǔ)音識(shí)別,交流就會(huì)變得很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于如何在uni-app使用微軟的文字轉(zhuǎn)語(yǔ)音服務(wù)的相關(guān)資料,需要的朋友可以參考下2022-06-06
JavaScript 中使用Promise.all()方法經(jīng)驗(yàn)技巧詳解
這篇文章主要為大家介紹了JavaScript 中使用Promise.all()方法經(jīng)驗(yàn)技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別詳解
本篇文章主要介紹了javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01

