1. 程式人生 > 程式設計 >TypeScript環境搭建並且部署到VSCode的詳細步驟

TypeScript環境搭建並且部署到VSCode的詳細步驟

目錄
  • TypeScript環境搭www.cppcns.com
    • 第一步:下載淘寶映象
    • 第二步:下載TypeScript
  • 部署到VSCode
    • 先建立一個資料夾tsDemo,
    • 修改tsconfig.on配置
    • 可能會遇到的報錯

前言:要想搭建TypeScript,那麼就要有npm,要想有cnpm,那麼就得有node環境。要是都有了的話,那麼接下來,往下看。

TypeScript環境搭建

第一步:下載淘寶映象

先檢查自己有沒有成功安裝npm

請新增圖片描述

有npm還不行,還要下載cnpm,命令如下(直接複製貼上):

npm install -g cnpm --registry=https://registry.npm.www.cppcns.com

tawww.cppcns.comobao.org

下載好之後,會顯示成這樣。

請新增圖片描述

第二步:下載TypeScript

在命令視窗輸入(直接複製貼上):

npm install -g typescript

下載好了是這樣。

請新增圖片描述

檢視版本號:

tsc -v

這樣ts就完全整好了。

請新增圖片描述

部署到VSCode

先建立一個資料夾tsDemo,

在tsDemo資料夾下建立一個demo.ts檔案,寫上內容。。
接著,在命令視窗上跳轉到該tsDemo資料夾位置上,

在這裡插入圖片描述

然後需要在這個位置上生成一個tsconfig.json檔案。
直接複製這個命令:

tsc --init

然後就會在tsDemo資料夾下生成tsconfig.json檔案。

修改tscohttp://www.cppcns.comnfig.json配置

把tsDemo資料夾拖拽到vsCode上去。,找到tsconfig.json,
把我選中的這一行的註釋去掉,儲存,

在這裡插入圖片描述

然後選中ts檔案,點選:終端=>執行生成任務。點選tsc:監聽

在這裡插入圖片描述

接著就會在終端生成js資料夾,裡面有由ts檔案編譯生成好的js檔案。
大功告成,給自己鼓掌啊🎉🎉🎉

在這裡插入圖片描述

可能會遇到的報錯

tsc : 無法載入檔案 C:\Users\JMQ\AppData\Roaming\npm\tsc.ps1,
因為在此係統上禁止執行。有關詳細資訊,請參閱
https:/go.micrZgAKITQb

osoft.co m/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解決方法

以管理員身份執行vscode。

在這裡插入圖片描述

然後輸入在終端輸入:

set-executionpolicy remotesigned

就不會報錯了

ps:下面看下vscode 執行typescript檔案的方法。

1、在vscode 控制檯 執行 tsc xxx.ts 命令轉換成 xxx.js

TypeScript環境搭建並且部署到VSCode的詳細步驟

TypeScript環境搭建並且部署到VSCode的詳細步驟

TypeScript環境搭建並且部署到VSCode的詳細步驟

2、執行 node xxx.ts 會輸出結果

TypeScript環境搭建並且部署到VSCode的詳細步驟

到此這篇關於TypeScript環境搭建並且部署到VSCode的詳細步驟的文章就介紹到這了,更多相關TypeScript環境搭建內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!