Express＋Typescriptプロジェクトのひな形をささっと作る

普段Angularを書いていて、CLIに任せることが多いので1からTypescriptプロジェクトを作ったメモ。
ExpressのAPIサーバが急遽必要になったので、ささっと作ってみました。

環境

• Windows10 + WSL2
• Node v18.14.0

手順

プロジェクト作る

mkdir my-app
cd my-app
npm init

必要なものインストール

npm install express
npm install -D typescript @types/express rimraf@3.0.2 @types/rimraf@3.0.2 cpx @types/node
npm install -D ts-node nodemon

rimrafはちゃんと調べてないですがバージョン指定せずに入れるとbuildでエラー吐いたためバージョンを落としてます。
ts-nodeはトランスパイルせずTypescriptのまま実行したいために。
nodemonはソースコードの変更を検知してホットリロードしたいために入れてます。

Typescript化

./node_modules/typescript/bin/tsc --init

tsconfig.jsonの修正

tsconfig.json

{
  "include": ["src"], // 追加。buildの対象をsrc配下にする
  "exclude": ["dist", "node_modules"], // 追加。distをoutDirに指定するので除外
  ...
  "outDir": "./dist", // コメントアウト外して修正。トランスパイルしたのをdist配下に出力
  ...
}

ビルド周り修正

package.json

{
  ...
  "scripts": {
    "start": "nodemon", // 追加。nodemonで起動するようにする
    "build": "rimraf ./dist && tsc && cpx -C ./src/resource/** ./dist/resource" 
    // 追加。build時にdistを消してからbuild
    // src/resource配下に.ts以外のファイルを配置したいため、cpxでbuild時にコピーするようにしておく
  }
  ...
}

nodemon.json

{
  "watch": ["src"], // src配下の変更を検知してホットリロードする
  "ext": "ts",
  "exec": "ts-node ./src/app.ts" // 実行時はトランスパイルせずts-nodeでそのまま.tsを実行
}

サンプル実装して稼働確認だけします。
express-generator使ってもよかったですが、ts化するのがめんどかった&ESModuleで実装したかったので手動で

mkdir src
mkdir src/resource
touch src/app.ts
touch src/resource/hoge.json

src/app.ts

import express from "express";
import http  from 'http';

export const app = express();
const port = 3000;
app.set('port', port);
const server = http.createServer(app);
server.listen(port);

app.use('/', express.Router().get('/', (req: express.Request, res: express.Response, next: express.NextFunction) => {
    res.send("Tomoyan is genius.");
}))

稼働確認

npm run start

> my-app@1.0.0 start
> nodemon

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node ./src/app.ts`

curl http://localhost:3000/
Tomoyan is genius.

試しにapp.tsを少し変えると、nodemonによってホットリロードされます

src/app.ts

app.use('/', express.Router().get('/', (req: express.Request, res: express.Response, next: express.NextFunction) => {
    // res.send("Tomoyan is genius.");
    res.send("Tomoyan is ikemen.");
}))

> my-app@1.0.0 start
> nodemon

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node ./src/app.ts`
[nodemon] restarting due to changes... // ここ！
[nodemon] starting `ts-node ./src/app.ts`

curl http://localhost:3000/
Tomoyan is ikemen.

再起動なしで変更反映されたのでOK

buildもやってみる

npm run build

> my-app@1.0.0 build
> rimraf ./dist && tsc && cpx -C ./src/resource/** ./dist/resource

ls -R dist/
dist/:
app.js  resource

dist/resource:
hoge.json

resource配下のjsonもちゃんとdist配下にコピーされてますね。

一応、JSでも動くよね

node ./dist/app.js

特にエラーなければOKです。
eslintとかも設定しなきゃ。。。