1.首先新建一個(gè)項(xiàng)目
npm init -yes
2.開啟Typescript依賴
npm install typescript --save-dev
安裝typescript,現(xiàn)在我們可以通過命令行來使用tsc命令
3.安裝nodejs類型
npm install @types/node --save-dev
4.使用命令創(chuàng)建一個(gè)tsconfig.json文件
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
去除了無用的注釋它的內(nèi)容像這樣的
{
"compilerOptions": {
"target": "es5",
"lib": ["es6"],
"module": "commonjs",
"rootDir": "src",
"resolveJsonModule": true,
"allowJs": true,
"outDir": "build",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": true,
"skipLibCheck": true
}
}
rootDir: typescript尋找我們編寫代碼的地方,現(xiàn)在配置為src目錄,現(xiàn)在需要在項(xiàng)目錄中創(chuàng)建一個(gè)src文件夾編寫ts代碼
5.編寫ts代碼
新建src/index.ts文件
console.log("hello 梁典典")
執(zhí)行編譯命令npx tsc,在項(xiàng)目目錄中會自動創(chuàng)建build/index.js文件,內(nèi)容如下
"use strict";
console.log("hello 梁典典");
6.配置熱重載功能
它將監(jiān)聽你的代碼自動進(jìn)行惹更新
npm install --save-dev ts-node nodemon
項(xiàng)目根目錄創(chuàng)建nodemon.json文件
{
"watch": ["src"],
"ext": ".ts,.js",
"ignore": [],
"exec": "ts-node ./src/index.ts"
}
在package,json新增一個(gè)腳本命令
"start:dev": "nodemon"
在命令行執(zhí)行npm run start:dev,就可以自動監(jiān)聽文件更改了
7.創(chuàng)建支持清理和編譯的生成版本
安裝rimraf
npm install --save-dev rimraf
添加腳本
"build": "rimraf ./build && tsc",
8. 創(chuàng)建生產(chǎn)啟動腳本
"start": "npm run build && node build/index.js"
現(xiàn)在可以使用typescript編寫代碼了
