溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
TypeScript環境搭建的實現步驟是什么，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
進入到要項目文件夾中，使用 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
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
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
安裝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" //注意：如果配置中已經有start，可以命名為別的
},在啟動parcel工具包
npm run startParcel
如果上邊的報錯則用
cnpm run startParcel
關于TypeScript環境搭建的實現步驟是什么問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
