TypeScriptでExpress(node.js)を動かす

node.jsのプロジェクトでも型の恩恵を受けるためにTypeScriptを使いたいと思うことが多いです。ts-nodeを使ってExpressの環境構築をしてみました。

ts-node を使用する

普通にTypeScriptをコンパイルしてjsを吐き出してそれを実行する方法でもいいですが、TypeScriptを使ったnode.jsの実行環境としてts-nodeがあるのでそれを使ってみます。トランスパイルなしにTypeScriptを実行できます。

GitHub - TypeStrong/ts-node: TypeScript execution and REPL for node.js

インストール

typescriptと型定義モジュールも一緒にインストールします。

npm i -D ts-node  typescript @types/node

実行

index.tsを下記のように書いてnpx ts-node index.tsで実行できます。

function hello(name: string): string {
  return `Hello, ${name}!`;
}

console.log(hello("TypeScript"));

ts-node-dev を使用する

ts-nodeはソースを変更したら再度実行し直さないといけません。ts-node-devにはソースの変更を検知して再起動できるオプションがあります。

GitHub - whitecolor/ts-node-dev: Compiles your TS app and restarts when files are modified.

インストール

npm i -D ts-node-dev

実行

--respawnをつけることによってホットリロードできるようになります。これで開発しやすくなりました。

npx ts-node-dev --respawn index.ts

package.jsonに下記のようにコマンドを追加しておけば便利です。

"scripts": {
  "dev": "ts-node index.ts",
  "dev:watch": "ts-node-dev --respawn index.ts",
}

ホットリロード時に通知が飛んでくるのを止める

--respawnをつけるとホットリロードのたびに通知が飛んでくるようになります。

.node-dev.jsonを作成し下記のプロパティを追加しておきます。これで通知が飛んでこなくなります。

{
  "notify": false
}

Expressの導入

node.jsのフレームワークとしては一番有名なのではないでしょうか。

Express - Node.js Web アプリケーション・フレームワーク

インストール。

npm i express

型定義モジュールのインストール。

npm i -D @types/express

index.tsをこんな感じで書き換えます。単純にh1タグを返すだけのサーバです。

import express from "express";
const app = express();

const PORT = process.env.PORT || 8080;

app.get("/", (_req, res) => {
  res.send(`
    <h1>TypeScript Express</h1>
`);
});

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

これでts-node-devを実行してみるとサーバが立ち上がります。curlを実行するとh1タグが返ってくるのがわかります。

curl http://localhost:8080/

    <h1>TypeScript Express</h1>