当前位置: 首页>后端>正文

express 项目支持 typescript 实战

首先创建一个express项目

  • 初始化项目
mkdir myapp
cd myapp
npm init (都用默认值)
  • 添加依赖包
npm install express nodemon
  • 修改 package.json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js",
    "dev": "nodemon src/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^3.0.3"
  }
}
  • 修改工程脚本 src/index.js
const express = require('express');

const app = express();

const port = process.env.PORT || 3000;

app.get("/", (req, res, next) => {
  res.send("Express Server");
});

app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);
});

基于javascript的express创建好了,可以启动“npm run dev”验证一下。

express + typescript 改造

  • 添加typescript使用的包
npm install -D typescript @types/express @types/node

npm install -D ts-node
  • 生成 tsconfig.json
npx tsc --init

命令运行后,会生成 tsconfig.json 文件,我们添加一下 "outDir": "./dist", 修改后内容如下:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
  • 将 src/index.js 改名成 src/index.ts,内容改成typescript脚本
import express, { Express, Request, Response } from "express";

const app: Express = express();
const port = process.env.PORT || 3000;

app.get("/", (req: Request, res: Response) => {
  res.send("Express + TypeScript Server");
});

app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);
});
  • 修改 package.json 的 scripts,内容如下
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",
    "dev": "nodemon src/index.ts"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^3.0.3"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.11.5",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  }
}

到这里,express + typescript 的工程改造就完成了,可以使用 “npm run dev” 命令启动工程进行测试。


https://www.xamrdz.com/backend/3xh1940444.html

相关文章: