TypeScript拆分Express Router后，为何Project2无法响应/welcome/hi请求？

我来帮你排查问题所在——Project 2无法响应GET http://localhost:3000/welcome/hi的核心原因是TypeScript模块导入导出的配置问题，附带还有不必要的路由重复挂载问题，具体如下：

为什么Project 1正常，Project 2不行？ #

Project 1的所有路由都在同一个文件中定义和挂载，不存在跨文件模块导入的问题，所以Express能正确识别并处理路由规则。

而Project 2的问题出在两个地方：

1. TypeScript模块交互配置缺失 #

你的app.ts通过export default router导出了Router实例，但如果你的tsconfig.json没有开启esModuleInterop: true，TypeScript在处理默认导出时会将其包裹在一个模块对象中。这意味着你在server.ts中import welcomeRouter from "./app"拿到的并不是真正的Router实例，而是一个包含default属性的模块对象。把这个对象传给app.use()，自然无法处理任何路由请求。

2. 冗余的路由重复挂载 #

在server.ts中你重复挂载了两次app.use("/welcome", welcomeRouter)，虽然这不会直接导致路由失效，但会添加冗余的中间件，属于不必要的代码。

修复方案 #

方案一：修改tsconfig.json配置（推荐） #

在你的tsconfig.json中开启esModuleInterop，让TypeScript正确处理默认导出的导入：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "target": "ES6", // 确保目标版本支持模块语法
    "module": "CommonJS", // 或其他你使用的模块系统
    // 其他现有配置...
  }
}

方案二：调整导入方式（无需修改配置） #

如果不想修改tsconfig，可以调整server.ts中的导入语句，明确获取默认导出的Router实例：

// 方式1：使用命名导入获取default
import { default as welcomeRouter } from "./app";

// 方式2：导入整个模块后提取default
import * as welcomeRouterModule from "./app";
const welcomeRouter = welcomeRouterModule.default;

额外优化：移除冗余挂载 #

删除server.ts中重复的app.use("/welcome", welcomeRouter)，保持代码整洁：

import express from "express";
import { Router, Request, Response } from "express";
import welcomeRouter from "./app";

const app: express.Application = express();
const port: any = process.env.PORT || 3000;
const router: Router = Router();

// 只挂载一次welcome路由
app.use("/welcome", welcomeRouter);

router.get("/", (req: Request, res: Response) => {
  res.send({"message":"Hello, World!"});
});

app.use("/", router);

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}/`);
});

完成以上修改后，重新编译运行Project 2，http://localhost:3000/welcome/hi就能正常返回Hello, hi!了。

内容的提问来源于stack exchange，提问作者mecode4food