Zenn
🦓

Express.js(Node.js)をTypescriptで開発する

2024/08/12に公開
Node.js
TypeScript
Express
tech

はじめに

Expressで作成するサーバーの開発環境にTypescriptを使うように設定していきます。
Node.jsがインストールされたことを前提とします。

https://expressjs.com/
https://www.typescriptlang.org/

tl:dr;

  1. npmプロジェクトを作成する
  2. Expressアプリを作成する
  3. Typescriptをインストールする
  4. index.jsファイルの拡張子を.tsにする
  5. tsconfig.jsonを作成する
  6. TypescriptをJavascriptに変化する設定を行う
  7. Nodemonを使ってExpressサーバーを再起動する

npmプロジェクトを作成する

node --version
v22.9.0

npm init -yを実行します。

npm init -y
Wrote to /Users/******/package.json:

{
  "name": "express-ts-sample",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

ls
package.json

npm initは、Node.jsパッケージのpackage.jsonファイルを作成するためのコマンドです。
package.jsonを追加することで、空のディレクトリをnpmプロジェクトに変換することができます。

index.jsファイルを作成します。

touch index.js

Expressをインストールします。

npm install express

added 65 packages, and audited 66 packages in 3s

13 packages are looking for funding
  run `npm fund` for details

2 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Expressアプリを作成する

簡単なExpressアプリを作成します。

index.js
const express = require('express');
const port = 8000;

const app = express();

app.get("/", (req, res) => {
    res.send("hello world");
})

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

localhost:8000へアクセスし、hello worldが表示されたらOKです。

Typescriptをインストールする

@types/nodeには Node.js用の型定義が含まれます。
このパッケージはNodeでTypescriptを使用する際にすべての型定義を読み込むために使用されます。

@types/expressには Express.js用の型定義が含まれます。

npm install -D typescript @types/node @types/express

added 13 packages, and audited 79 packages in 2s

13 packages are looking for funding
  run `npm fund` for details

2 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

index.jsファイルの拡張子を.tsにする

index.jsファイルの拡張子を.tsにします。
ファイルの最初にあるrequire文をimport文に修正します。

index.ts
import express, { Express, Request, Response } from "express";

Typescriptが適用されたことを確認します。

サーバーを再度起動してみると.tsの拡張子が識別されないエラーが起きます。

node index.ts
node:internal/modules/esm/get_format:218
  throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
        ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/******/index.ts

Node.js自体はTypeScriptファイルを直接実行することはできません。
TypeScriptファイルをNode.jsで実行するには、通常以下のような方法を使用します:

  1. ts-nodeのようなツールを使用して、実行時にTypeScriptをJavaScriptに変換する。
  2. TypeScriptコードを事前にJavaScriptにコンパイルし、生成されたJavaScriptファイルをNode.jsで実行する。
  3. TypeScriptコンパイラなどのビルドツールを使用して、TypeScriptをJavaScriptにトランスパイルするビルドプロセスを設定する。

方法3を使っていきます。

TypescriptをJavascriptに変化する設定を行う

TypeScriptの設定ファイル（tsconfig.json）を生成します。

npx tsc --init

Created a new tsconfig.json with:
                                                                                        TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

tsconfig.jsonファイルを開き、outDirのコメントアウトを解除し、設定を修正します。
アプリ配下はtypescriptファイルを配置し、dist配下にjsファイルが出力されるようにします。

tsconfig.json
// "outDir": "./",
↓
"outDir": "./dist",

npx tcsを実行し、/distフォルダーが作成されたことを確認します。

JavaScriptにトランスパイルされたファイルも作成されました。

node dist/index.js
Server is running on port 8000

サーバーを起動することができました。

但し、長いのでpackage.jsonにスクリプトを追加します。

package.json
  "scripts": {
++  "build": "npx tsc",
++  "start": "node dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

動作確認します。

➜  npm run build

> express-ts-sample@1.0.0 build
> npx tsc

➜  npm run start

> express-ts-sample@1.0.0 start
> node dist/index.js

Server is running on port 8000

ファイルの変化をウォッチする

最後に、ファイルの変化をウォッチし、
Nodemonを使ってExpressサーバーを再起動する設定を追加していきます。

npm install -D nodemon
⠙

added 29 packages, and audited 108 packages in 2s

17 packages are looking for funding
  run `npm fund` for details

2 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
package.json
  "scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",
++  "serve": "npx tsc -w & nodemon dist/index.js",
  },

npm run serveを実行してみます。

[9:01:28 PM] Starting compilation in watch mode...

Server is running on port 8000
[9:01:29 PM] Found 0 errors. Watching for file changes.

[nodemon] restarting due to changes...
[nodemon] starting `node dist/index.js`
Server is running on port 8000

終わりに

簡単ですが、
ExpressアプリにTypescriptで開発できるようになりました。
誰かの参考になれば嬉しいです。

Discussion