TypeScript環境搭建的實現步驟
目錄
- 1. 安裝TS環境
- 2. 安裝 ts-node
- 3. 安裝nodemon
- 4. Parcel打包支援瀏覽器執行TS檔案
前提是已經裝好了node.，node.js安裝圖文教程
1. 安裝TS環境
進入到要專案資料夾中，使用 npm init --yes 初始化（該命令在專案資料夾中生成 package.json）
安裝 typescript (安裝不成功，可能是許可權不夠)
全域性安裝：cnpm i typescript -g 【建議】
本地安裝：cnpm i typescript -D
【cnpm i typescript -D 是 cnpm install typescript --save-dev的縮寫】
在專案資料夾中生成tsconfig.json檔案
tsc --init
修改剛剛生成的 tsconfig.json 檔案中的配置
注意: 如果進行如下配置， dist 、src、package.json 三者須在同一個父目錄下
"outDir": "./dist" //ts編譯後生成js檔案儲存到dist資料夾中 "rootDir": "./src",//自己編寫的ts原始檔在src資料夾中 "target": "es5",//編譯出來的js檔案相容es5語法
在src目錄下新建一個base.ts檔案
//建立一個字串型別的變數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能直接執行ts程式碼，無需使用tsc將ts程式碼編譯成js程式碼。
全域性安裝：cnpm i ts-node -g 【建議】
本地安裝： cnpm i ts-node -D
安裝好 ts-node 之後，在ts檔案所在的資料夾中使用ts-node，將直接在終端中執行ts檔案
ts-node base.ts
3. 安裝nodemon
nodemon作用：自動檢測到目錄中的檔案更改時通過重新啟動應用程式來除錯，基於node.js的應用程式
全域性安裝：cnpm install -g nodemon 【建議】
本地安裝：cnpm i nodemon -D
在package.json中配置自動檢測，自動重啟應用程式
"scripts": { //如果已經存在直接將下邊的粘進去即可
"start": "nodemon --watch src/ -e ts --exec ts-node ./src/base.ts"
}
- nodemon --watch src/ 表示：檢測目錄是package.json同級目錄src
- -e ts 表示：nodemon 命令準備將要監聽的是ts字尾的檔案
- --exec ts-node ./src/base.ts 表示：檢測到src目錄下有任何變化 都要重新執行base.ts檔案
開始監聽src目錄
start 是第2步配置時的命名，相對應即可
npm start
4. Parcel打包支援瀏覽器執行TS檔案
安裝Parcel打包工具：npm install -g parcel-bundler
在package.json 所在的資料夾中新建一個 index.html 檔案
在html檔案中引入你想要在瀏覽器中看到效果的ts檔案
<!DOCTYPE html>
<html lang="tyVBjNNrHnen">
<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"&http://www.cppcns.comgt;
<title>Document</title>
<!-- 引入的是ts檔案 -->
<script src="./src/base.ts"></script>
</hhttp://www.cppcns.comead>
<body>
</body>
</html>
在package.json中給npm新增啟動項，支援啟動parcel工具包
"scripts": {
"startParcel": "parcel ./index.html" //注意：如果配置中已經有start，可以命名為別的
},
在啟動parcel工具包
npm run startParcel
如果上邊的報錯則用
cnpm run startParcel
到此這篇關於TypeScript環境搭建的實現步驟的文章就介紹到這了,更多相關TypeScript環境搭建內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！