TypeScript環(huán)境搭建的實現(xiàn)步驟是什么

發(fā)布時間：2022-01-15 13:17:24 來源：億速云閱讀：127 作者：柒染欄目：開發(fā)技術(shù)

TypeScript環(huán)境搭建的實現(xiàn)步驟是什么，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

1. 安裝TS環(huán)境

進(jìn)入到要項目文件夾中，使用 npm init --yes 初始化（該命令在項目文件夾中生成 package.json）

安裝 typescript (安裝不成功，可能是權(quán)限不夠)

全局安裝：cnpm i typescript -g 【建議】

本地安裝：cnpm i typescript -D

【cnpm i typescript -D 是 cnpm install typescript --save-dev的縮寫】

在項目文件夾中生成tsconfig.json文件

 tsc --init

修改剛剛生成的 tsconfig.json 文件中的配置
注意: 如果進(jìn)行如下配置， dist 、src、package.json 三者須在同一個父目錄下

"outDir":  "./dist"     //ts編譯后生成js文件保存到dist文件夾中
"rootDir": "./src",  //自己編寫的ts源文件在src文件夾中
"target": "es5", //編譯出來的js文件兼容es5語法

在src目錄下新建一個base.ts文件

//創(chuàng)建一個字符串類型的變量str
let str: string = 'hello word';
console.log( str);

編譯src目錄以及子目錄下的ts文件
在src目錄下：輸入tsc ( 注意直接寫tsc命令即可)，會把src目錄以及子目錄下的ts文件全部編譯成js文件，并全部輸出到dist目錄中

tsc

自動編譯

tsc --watch

2. 安裝 ts-node

ts-node讓node能直接運(yùn)行ts代碼，無需使用tsc將ts代碼編譯成js代碼。

全局安裝：cnpm i ts-node -g 【建議】

本地安裝： cnpm i ts-node -D

安裝好 ts-node 之后，在ts文件所在的文件夾中使用ts-node，將直接在終端中運(yùn)行ts文件

ts-node base.ts

3. 安裝nodemon

nodemon作用：自動檢測到目錄中的文件更改時通過重新啟動應(yīng)用程序來調(diào)試，基于node.js的應(yīng)用程序

全局安裝：cnpm install -g nodemon 【建議】

本地安裝：cnpm i nodemon -D

在package.json中配置自動檢測，自動重啟應(yīng)用程序

 "scripts": {  //如果已經(jīng)存在直接將下邊的粘進(jìn)去即可
     "start": "nodemon --watch src/ -e ts --exec ts-node ./src/base.ts"
}

nodemon --watch src/ 表示：檢測目錄是package.json同級目錄src
-e ts 表示：nodemon 命令準(zhǔn)備將要監(jiān)聽的是ts后綴的文件
--exec ts-node ./src/base.ts 表示：檢測到src目錄下有任何變化都要重新執(zhí)行base.ts文件

開始監(jiān)聽src目錄
start 是第2步配置時的命名，相對應(yīng)即可

npm start

4. Parcel打包支持瀏覽器運(yùn)行TS文件

安裝Parcel打包工具：npm install -g parcel-bundler

在package.json 所在的文件夾中新建一個 index.html 文件
在html文件中引入你想要在瀏覽器中看到效果的ts文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入的是ts文件 -->
    <script src="./src/base.ts"></script>
</head>
<body>
    
</body>
</html>

在package.json中給npm添加啟動項，支持啟動parcel工具包

"scripts": {
  "startParcel": "parcel ./index.html"  //注意：如果配置中已經(jīng)有start，可以命名為別的
},

在啟動parcel工具包

 npm  run startParcel

如果上邊的報錯則用

 cnpm  run startParcel

關(guān)于TypeScript環(huán)境搭建的實現(xiàn)步驟是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

TypeScript環(huán)境搭建的實現(xiàn)步驟是什么

1. 安裝TS環(huán)境

2. 安裝 ts-node

3. 安裝nodemon

4. Parcel打包支持瀏覽器運(yùn)行TS文件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽