搭建Javascript環(huán)境
因?yàn)門ypeScript不能直接在瀏覽器上運(yùn)行。它需要編譯器來(lái)編譯并生成JavaScript文件。所以需要首先安裝好javascript環(huán)境，可以參考文章：https://blog.csdn.net/liwenxiang629/article/details/129491984
全局安裝Typescript模塊
執(zhí)行下面命令進(jìn)行安裝
npm install -g typescript
安裝完成后我們就可以使用 TypeScript 編譯器，名稱叫 tsc，可將編譯結(jié)果生成 js 文件。
在cmd窗口中，通過(guò)下面命令確認(rèn)typescirpt是否安裝成功
tsc --version
tsc --help
helloworld.ts
創(chuàng)建一個(gè)目錄TS_DEMO, 然后用 VS Code 打開(kāi)，創(chuàng)建文件helloworld.ts,里面編碼如下：
let message: string = 'Hello World';
console.log(message);
初始化 TypeScript 配置
為了方便自動(dòng)編譯 ts 文件，需要對(duì) TypeScript 進(jìn)行一些配置，比如生成 tsconfig.json 文件，tsconfig.json 是 TypeScript 編譯器的配置文件，用于指定編譯 TypeScript 代碼時(shí)的編譯選項(xiàng)和編譯目標(biāo)等信息。通過(guò)修改該文件，可以定制 TypeScript 編譯器的行為，例如指定編譯目標(biāo)、啟用或禁用特定的語(yǔ)言特性、設(shè)置代碼檢查規(guī)則等。具體方法如下：
執(zhí)行命令tsc --init，生成tsconfig.json
然后自定義配置下：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "out",
"sourceMap": true
}
}
添加任務(wù)監(jiān)聽(tīng) tsconfig.json
VS Code 菜單欄 終端->運(yùn)行任務(wù)... 選擇 tsc:watch - tsconfig.json
然后項(xiàng)目會(huì)自動(dòng)編譯 helloworld.ts 為 js 文件到 out 目錄下，如下圖所示
備注：--watch表示啟用監(jiān)視模式，只要重新保存了ts 文件，就會(huì)自動(dòng)調(diào)用tsc將ts 轉(zhuǎn)化為 js。
我們也可以在vs code 的終端中，通過(guò)命令 tsc helloworld.ts的方式把ts 文件轉(zhuǎn)為js文件，然后再通過(guò)命令node helloworld.js 運(yùn)行js代碼！ （因?yàn)門ypeScript不能直接在瀏覽器上運(yùn)行。它需要編譯器來(lái)編譯并生成JavaScript文件），如下圖所示：
編寫html文件引入js
在實(shí)際工作中，我們?cè)趆tml文件中直接引入out文件夾下的js文件即可,例如
<script src="./out/helloworld.js"></script>
一個(gè)常見(jiàn)問(wèn)題
如果出現(xiàn)下面這個(gè)錯(cuò)誤
tsc : 無(wú)法加載文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1，因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本。有關(guān)詳細(xì)信息，請(qǐng)參閱https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
解決方法是，以管理員身份打開(kāi)powershell，輸入set-ExecutionPolicy RemoteSigned。
我的每一篇文章都希望幫助讀者解決實(shí)際工作中遇到的問(wèn)題！如果文章幫到了您，勞煩點(diǎn)贊、收藏、轉(zhuǎn)發(fā)！您的鼓勵(lì)是我不斷更新文章最大的動(dòng)力！
