TypeScript環(huán)境搭建的實現(xiàn)步驟
前提是已經(jīng)裝好了node.js，node.js安裝圖文教程
1. 安裝TS環(huán)境
進入到要項目文件夾中，使用 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文件
//創(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能直接運行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": { ?//如果已經(jīng)存在直接將下邊的粘進去即可
?? ? "start": "nodemon --watch src/ -e ts --exec ts-node ./src/base.ts"
}- nodemon --watch src/ 表示：檢測目錄是package.json同級目錄src
- -e ts 表示：nodemon 命令準備將要監(jiān)聽的是ts后綴的文件
- --exec ts-node ./src/base.ts 表示：檢測到src目錄下有任何變化 都要重新執(zhí)行base.ts文件
開始監(jiān)聽src目錄
start 是第2步配置時的命名，相對應即可
npm start
4. Parcel打包支持瀏覽器運行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
到此這篇關于TypeScript環(huán)境搭建的實現(xiàn)步驟的文章就介紹到這了,更多相關TypeScript環(huán)境搭建內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序頁面滾動到指定位置代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
微信小程序點擊按鈕動態(tài)切換input的disabled禁用/啟用狀態(tài)功能
這篇文章主要介紹了微信小程序點擊按鈕動態(tài)切換input的disabled禁用/啟用狀態(tài)功能，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
JS實現(xiàn)二維數(shù)組元素的排列組合運算簡單示例
這篇文章主要介紹了JS實現(xiàn)二維數(shù)組元素的排列組合運算,結合實例形式分析了javascript針對二維數(shù)組的遍歷、排列組合運算等相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了es6 symbol的實現(xiàn)方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要給大家介紹了關于使用Echarts繪制一個多組折線圖的相關資料,Echarts是一個功能強大的可視化庫,可以用來繪制各種類型的圖表,包括多組折線圖,需要的朋友可以參考下2023-09-09
數(shù)組的冒泡排序很實用，不過還是有些同學們不會，于是在本文為大家詳細介紹下，感興趣的朋友不要錯過2013-12-12
使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享
這篇文章主要介紹了使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享,編寫半透明遮罩層時要注意定位問題、不要滿屏遮罩,需要的朋友可以參考下2016-05-05
這篇文章主要為大家介紹了Three.js GLTF模型加載實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
今天小編就為大家分享一篇layer.open彈層查看縮略圖的原圖,自適應大小的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了Javascript動畫插件lottie-web的使用方法，包括配合vue-cli使用及在HTML頁面中使用代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02