快捷導(dǎo)航

express-generator 配置typescript的實(shí)現(xiàn)步驟

更新時間：2026年05月14日 10:00:45 作者：書中自有妍如玉

本文介紹了將Express項(xiàng)目從JavaScript遷移到TypeScript的完整流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

下面開始步驟

npm install -g express-generator
express ejs -e? //ejs是項(xiàng)目名稱? -e是指定ejs為項(xiàng)目的模板引擎 或者單獨(dú)指定
express --view=ejs ejs? ?express --view=jade ejs

進(jìn)入項(xiàng)目目錄

cd ejs

安裝依賴

npm install

安裝 TypeScript

安裝 TypeScript 和相關(guān)的依賴：安裝到開發(fā)環(huán)境，生產(chǎn)環(huán)境不需要。

npm install typescript ts-node @types/express @types/node --save-dev

配置 TypeScript

在項(xiàng)目根目錄下創(chuàng)建一個 tsconfig.json 文件，配置 TypeScript 編譯器選項(xiàng)：

或者使用 npx tsc --init 初始化自動在根目錄生成tsconfig.json 文件

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [// 如果你需要排除某些文件或目錄，可以添加到這里
    "node_modules",
    "**/*.spec.ts"
  ] 
}

修改文件結(jié)構(gòu)

將你的 JavaScript 文件從 bin/www 和 app.js 移動到 src 文件夾中，并相應(yīng)地修改文件擴(kuò)展名從 .js 到 .ts。例如：

mkdir src
mv bin/www src/bin.ts
mv app.js src/app.ts

修改入口文件和腳本

在 package.json 中，修改 start 和 dev 腳本，使用 ts-node 來運(yùn)行 TypeScript 文件：

{
  "scripts": {
    "start": "ts-node ./src/bin.ts",
    "dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/bin.ts",
    "build": "tsc",
    "serve": "node dist/bin.js"
  }
}

創(chuàng)建 TypeScript 文件結(jié)構(gòu)

確保你的 src 文件夾下有正確的文件結(jié)構(gòu)，例如：

src/
  bin.ts         // 使用 ts-node 直接運(yùn)行的入口文件（例如啟動服務(wù)器）
  app.ts         // Express 應(yīng)用的主要文件
  routes/        // 路由文件目錄，例如 index.ts, users.ts 等
  controllers/   // 控制器目錄，例如 userController.ts 等（如果需要）

運(yùn)行和構(gòu)建項(xiàng)目

現(xiàn)在你可以使用以下命令來運(yùn)行你的應(yīng)用：

npm run dev  // 開發(fā)模式，使用 nodemon 和 ts-node 熱重載代碼更改
npm run build  // 構(gòu)建項(xiàng)目到 dist 目錄（編譯 TypeScript 到 JavaScript）
npm start      // 使用 node 直接啟動編譯后的 JavaScript 文件（從 dist 目錄）

通過以上步驟，你可以成功地將你的 Express 應(yīng)用從 JavaScript 遷移到 TypeScript，并設(shè)置一個合適的開發(fā)環(huán)境和構(gòu)建流程

到此這篇關(guān)于express-generator 配置typescript的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)express-generator 配置typescript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: