ExpressとTypescriptを使ってプロジェクトを立ち上げる手順を書き残します。
コードはGitHub🐱で公開しています。

🗂 ディレクトリ構成

以下のようになる予定です。

- src
  - server.ts    ・・・Typescriptで実際に記述するコード
- dist
  - server.js    ・・・トランスパイル後に生成されるjsファイル
- tsconfig.json
- package.json
- package-lock.json
- node_modules

src配下に.tsファイル
dist配下に.jsファイル

が生成される想定です。

🌱 プロジェクト作成

以下のコマンドを実行します。

mkdir myapp
cd myapp
npm init -y

以下のようにプロジェクトができます。


{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

📚 パッケージをインストール

必要なパッケージをインストールします。

npm i typescript ts-node express

npm i @types/node @types/express -D

以下のパッケージがインストールされます。

🫐 Typescriptの設定

tsconfig.jsonを生成します。

npx tsc --init

includeを追加してコンパイル対象ファイルを明記します。

{
  "compilerOptions": {
    ...略
  },
  "include": ["./src/**/*"],
}

ルート直下にsrcディレクトリとdistディレクトリも作っておきます。

mkdir src
mkdir dist

🔧 コードを用意

server.tsの配置

src配下にserver.tsを作成し、以下をコピペします。

import express from "express";
const app: express.Express = express();

// サーバ起動
app.listen(3000, () => {
  console.log("Start on port 3000.");
});

// GETテスト
app.get("/test", (req: express.Request, res: express.Response) => {
  res.send("OK");
});

起動コマンドを追加

nodemonという便利なツールを使います。
使用は必須ではありませんが、ファイル変更を検知したら自動的にサーバを再起動してくれる超便利なやつなので是非使ってください。
グローバルインストールしておきます。

npm install -g nodemon

package.jsonのscriptsに "ts" コマンドを追加します。

{
  ...

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "ts": "nodemon --files --watch 'src/**/*.ts' --exec 'ts-node' src/server.ts"
  },

  ...
}

--files --watch 'src/**/*.ts' でsrcディレクトリ配下のファイル変更を検知し、
--exec 'ts-node' src/server.ts で、上の変更があればts-nodeを実行する、
という命令になっています。

🏃‍♀️ ts-nodeで動かしてみる

ターミナルで以下を実行します

npm run ts

ブラウザで以下にアクセスすると・・

http://localhost:3000/test

「OK」が表示されていることが確認できます。

🏃‍♂️ トランスパイルして動かしてみる

トランスパイルしたファイルはdist配下に入ってほしいので、tsconfig.jsonのoutDirを明記します。

  "compilerOptions": {
    ...
    "outDir": "./dist"
    ...
}

トランスパイルします。

npx tsc

するとdistディレクトリ配下にserver.jsができていると思います。
(tsconfig.jsのoutDirを指定しなかった場合は server.tsと同じ階層にファイルができていると思います。)

これを実行します。

node ./dist/server.js

ブラウザで以下にアクセスしたら・・・

http://localhost:3000/test

先ほどと同じように「OK」が表示されるはずです。

🔍 ちなみに

トランスパイルされたjsファイルの中身は以下のようになっています。

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = (0, express_1.default)();
// サーバ起動
app.listen(3000, () => {
    console.log("Start on port 3000.");
});
// GETテスト
app.get("/test", (req, res) => {
    res.send("OK");
});

詳しくは理解できなかったのですが、
前半部分はES Modules(import/export)の互換性を持たせるための実装らしいです。

以上。

終わりに

今回はこれだけ。ほぼ最小構成です。
今後はここから

sequelizeでDB接続
inversifyでDI導入
Dockerコンテナ化してECSで起動

など試してみたいと思います。