2022年4月6日水曜日

express + TypeScript 超入門

概要
環境
インストール
サンプルアプリ
動作確認
TypeScript 化する
少し解説
class を導入してみる
最後に
参考サイト

概要

express のサンプルコードに TypeScript を適用してみました

環境

macOS 11.6.5
nodejs 17.8.0
express 4.17.3

インストール

npm install express --save-dev

サンプルアプリ

vim app.js

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

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

動作確認

npm exec node app.js
curl localhost:3000

これを TypeScript 化してみます

TypeScript 化する

ts-node というパッケージを使うと簡単に TypeScript 化した express アプリを動かすことができます
TypeScript に必要なパッケージも合わせてインストールします

npm install ts-node typescript @types/node @types/express --save-dev

tsconfig.json も作成しておきましょう

npx tsc --init

とりあえずインタフェースを導入してみます
TypeScript を使うので拡張子を .ts にしましょう

vim app.ts

import express from 'express'
const app = express()
const port = 3000

interface MyResponse {
  message: string;
}

function createMessage(my_message: string): MyResponse {
  let myResponse = {
    message: my_message
  }
  return myResponse
}

app.get('/', (req: express.Request, res: express.Response) => {
  let msg = createMessage('Hello World!')
  res.send(msg.message)
})

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

npx ts-node app.ts
curl localhost:3000

少し解説

express のインポートを require から import 文に変更する必要があります
これは routing の req と res 引数に express.Request と express.Response を型定義するためです

createMessage は MyResponse インタフェースで返す必要があります

class を導入してみる

vim app.ts

import express from 'express'
const app = express()
const port = 3000

class UserProfile {
  constructor(public name: string, public age: number) {
  }
  toJSON = () => {
    return {
      name: this.name,
      age: this.age,
    }
  }
}

function show(profile: UserProfile, res: express.Response) {
  res.send(JSON.stringify(profile))
}

app.get('/', (req: express.Request, res: express.Response) => {
  let profile = new UserProfile("hawksnowlog", 10)
  show(profile, res)
})

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

UserProfile というクラスを定義しました
toJSON を実装しておくと JSON.stringify 時に自動で呼び出してくれるようです

最後に

express で扱うリクエストのオブジェクトはクラスなどで管理するとどんなリクエストが飛んでくるのかクラスの定義を見ただけでわかるようになるので良いかなと思います

レスポンスも同様でクラス化するとどんなレスポンスが返るのかわかりやすくなるかなと思います

express.Request をクラスのオブジェクトにシリアライズする簡単な方法もあるかもしれません

参考サイト

https://qiita.com/zaburo/items/69726cc42ef774990279

hawksnowlog