Express.js(TypeScript)のプロジェクトでrouterがうまく動かなくて困っています

Question

Express.js(TypeScript)のプロジェクトでrouterがうまく動かなくて困っています。

express-generatorで作成した、Express.jsプロジェクトをTypeScriptに変換して、
./src/index.tsを作成し、
ts-nodeで実行できるところまで確認しています。

この2つはjsonが返ってきますが、
http://localhost:3000
http://localhost:3000/api

./src/api/employeeApiController.tsを用意し、このControllerにアクセスさせようとして、
アドレスを入力してもアクセスできなくフリーズしています。
http://localhost:3000/api/employees

わかるかたいらっしゃればお願いします。

■./src/index.ts

import express, { Request, Response, NextFunction } from "express";
import createError from "http-errors";
import path from "path";
import cookieParser from "cookie-parser";
import logger from "morgan";

const app = express();

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

// ルーターのマウント
import { employeeApiController } from "./api/employeeApiController";
app.use("/api/employees", employeeApiController);

// APIアクセス用のルートハンドラ
app.get("/api", (req: Request, res: Response, next: NextFunction) => {
  res.json({ message: "200 OK" });
});

// catch 404 and forward to error handler
app.use(function (req: Request, res: Response, next: NextFunction) {
  next(createError(404));
});

// error handler
app.use(function (err: Error, req: Request, res: Response, next: NextFunction) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  const httpStatusCode = (err as any).status || 500;
  res.status(httpStatusCode).json({ message: httpStatusCode + " " + err.message });
});

// ポート指定
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

module.exports = app;

■./src/api/employeeApiController.ts

import express, { Request, Response, NextFunction } from "express";

export const employeeApiController = () => {
  const router = express.Router();

  // GET /api/employees
  router.get(
    "/",
    (request: Request, response: Response, next: NextFunction) => {
      async () => {
        response.json({ message: "done" });
      };
    }
  );

  return router;
};

■ tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}

■ package.json

{
  "name": "backend",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "ts-node ./src/index.ts",
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "@types/cookie-parser": "^1.4.7",
    "@types/debug": "^4.1.12",
    "@types/express": "^4.17.21",
    "@types/http-errors": "^2.0.4",
    "@types/morgan": "^1.9.9",
    "@types/node": "^16.11.10",
    "ts-node": "10.9.1",
    "ts-node-dev": "^2.0.0",
    "typescript": "4.5.2"
  }
}

Answer 1

app.use("/api/employees", employeeApiController);

employeeApiController を呼ぶ必要があるのではないでしょうか。

app.use("/api/employees", employeeApiController());

Comments

[miu1]

ご回答ありがとうございます。
確かにexportするものを、関数を入れているので()がつくのが正しいのかなと思いますが、
アクセスできず、コンソールにもエラーが表示されない状態です。

[miu1]

default exportにすると、
--
import express, { Request, Response, NextFunction } from "express";

const router = express.Router();

// GET /api/employees
router.get("/", (request: Request, response: Response, next: NextFunction) => {
response.json({ message: "done" });
});

export default router;
--
アクセスこそできましたが、今の設定だとnamed exportができないようです。

[miu1]

index.tsに employeeApiController()のように括弧が必要なのはご指摘通りで、asyncが原因でした。
apiにasyncは付けるのは難しいのでしょうか。

import express, { Request, Response, NextFunction } from "express";

export const employeeApiController = () => {
const router = express.Router();

// GET /api/employees
router.get(
"/",
(request: Request, response: Response, next: NextFunction) => {
// async () => {
response.json({ message: "done" });
// };
}
);

return router;
};

ネットで検索したところ、catchにnext()を入れる必要があるかもしれません。

Answer 2

自己解決できました。
ご指摘があったindex.tsにemployeeApiController()　のように括弧をつけることと、
employeeApiController.tsのasyncの位置を修正、例外処理を追加して、catchでnextを実行するようにしました。

import express, { Request, Response, NextFunction } from "express";
// import { employeeService } from "employeeService";

export const employeeApiController = () => {
  const router = express.Router();

  // GET /api/employees
  router.get(
    "/",
    async (request: Request, response: Response, next: NextFunction) => {
      try {
        response.json({ message: "done" });
        // 実際はserviceなどを呼ぶ、コードはイメージ。
        // const employees = await employeeService.find();
        // response.json(employees);
      } catch (exception: any) {
        next(exception);
      }
    }
  );

  return router;
};