TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟
前提是已經(jīng)裝好了node.js，node.js安裝圖文教程
1. 安裝TS環(huán)境
進(jìn)入到要項(xiàng)目文件夾中，使用 npm init --yes 初始化（該命令在項(xiàng)目文件夾中生成 package.json）
安裝 typescript (安裝不成功，可能是權(quán)限不夠)
全局安裝：cnpm i typescript -g 【建議】
本地安裝：cnpm i typescript -D
【cnpm i typescript -D 是 cnpm install typescript --save-dev的縮寫】
在項(xiàng)目文件夾中生成tsconfig.json文件
?tsc --init ?
修改剛剛生成的 tsconfig.json 文件中的配置
注意: 如果進(jìn)行如下配置， dist 、src、package.json 三者須在同一個(gè)父目錄下
"outDir": ?"./dist" ? ? //ts編譯后生成js文件保存到dist文件夾中 "rootDir": "./src", ?//自己編寫的ts源文件在src文件夾中 "target": "es5", //編譯出來(lái)的js文件兼容es5語(yǔ)法
在src目錄下新建一個(gè)base.ts文件
//創(chuàng)建一個(gè)字符串類型的變量str let str: string = 'hello word'; console.log( str);
編譯src目錄以及子目錄下的ts文件
在src目錄下：輸入tsc ( 注意直接寫tsc命令即可)，會(huì)把src目錄以及子目錄下的ts文件全部編譯成js文件，并全部輸出到dist目錄中
tsc
自動(dòng)編譯
tsc --watch
2. 安裝 ts-node
ts-node讓node能直接運(yùn)行ts代碼，無(wú)需使用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作用：自動(dòng)檢測(cè)到目錄中的文件更改時(shí)通過(guò)重新啟動(dòng)應(yīng)用程序來(lái)調(diào)試，基于node.js的應(yīng)用程序
全局安裝：cnpm install -g nodemon 【建議】
本地安裝：cnpm i nodemon -D
在package.json中配置自動(dòng)檢測(cè)，自動(dòng)重啟應(yīng)用程序
?"scripts": { ?//如果已經(jīng)存在直接將下邊的粘進(jìn)去即可
?? ? "start": "nodemon --watch src/ -e ts --exec ts-node ./src/base.ts"
}- nodemon --watch src/ 表示：檢測(cè)目錄是package.json同級(jí)目錄src
- -e ts 表示：nodemon 命令準(zhǔn)備將要監(jiān)聽(tīng)的是ts后綴的文件
- --exec ts-node ./src/base.ts 表示：檢測(cè)到src目錄下有任何變化 都要重新執(zhí)行base.ts文件
開(kāi)始監(jiān)聽(tīng)src目錄
start 是第2步配置時(shí)的命名，相對(duì)應(yīng)即可
npm start
4. Parcel打包支持瀏覽器運(yùn)行TS文件
安裝Parcel打包工具：npm install -g parcel-bundler
在package.json 所在的文件夾中新建一個(gè) 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添加啟動(dòng)項(xiàng)，支持啟動(dòng)parcel工具包
"scripts": {
"startParcel": "parcel ./index.html" //注意：如果配置中已經(jīng)有start，可以命名為別的
},
在啟動(dòng)parcel工具包
npm run startParcel
如果上邊的報(bào)錯(cuò)則用
cnpm run startParcel
到此這篇關(guān)于TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)TypeScript環(huán)境搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
webpack是如何實(shí)現(xiàn)模塊化加載的方法
這篇文章主要介紹了webpack是如何實(shí)現(xiàn)模塊化加載的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
大家都知道在js中沒(méi)有類的概念，因此它的對(duì)象也與基于類的語(yǔ)言中的對(duì)象有所不同。所以大家要了解面向?qū)ο螅紫纫私鈐s中的對(duì)象和原型，下面本文給大家介紹JavaScript中的對(duì)象和原型(一)知識(shí)，一起看下吧2016-08-08
JavaScript實(shí)現(xiàn)通過(guò)滑塊改變網(wǎng)頁(yè)顏色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)通過(guò)滑塊改變網(wǎng)頁(yè)顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了怎樣控制input輸入框中提示信息的顯示和隱藏 ,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了js模擬支付寶密碼輸入框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情
這篇文章主要介紹了三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了微信小程序使用component自定義toast彈窗效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
詳解基于webpack&gettext的前端多語(yǔ)言方案
這篇文章主要介紹了詳解基于webpack&gettext的前端多語(yǔ)言方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
下面小編就為大家?guī)?lái)一篇JavaScript中閉包之淺析解讀(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
解析JavaScript中點(diǎn)號(hào)“.”的多義性
這篇文章主要介紹了JavaScript中點(diǎn)號(hào)“.”的多義性。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12