TypeScript Academy · レッスン

Routerハンドラー、Request/Responseの型付け

Expressのルートハンドラーでparams、query、JSON bodyに型を付け、res.jsonと再利用可能なDTOで型付きレスポンスを返します

レッスン 1/38 ステップ

「Routerハンドラー、Request/Responseの型付け」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン1/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標: 厳密に型付けした小規模な Express API を構築します。ルートの params、query、JSON body に型を付け、res.json で型付き JSON を返します。

DTO インターフェース
Request<P, Res, Body, Q>
型付き res.json

サーバーのセットアップ

Express を初期化し、JSON パースを有効にします。ヘルスエンドポイントは小さく保ち、Request/Response で型付けしてください。

import express, { Request, Response } from "express"

const app = express()
app.use(express.json())

app.get("/", (_req: Request, res: Response) => {
  res.type("text/plain").send("OK")
})

app.listen(3000, () => console.log("http://localhost:3000"))

params と query

各スロットを明示的に型付けします。Params、Query、ResBody を指定してください。自動補完により、タイプミスを防ぎやすくなります。

import { Request, Response } from "express"

type Params = { id: string }
 type Query = { verbose?: "1" | "0" }
 type ResBody = { id: string; name: string; details?: string }

export function getUser(req: Request<Params, ResBody, unknown, Query>, res: Response<ResBody>) {
  const { id } = req.params
  const { verbose } = req.query
  const body: ResBody = { id, name: "Ada", details: verbose === "1" ? "Loves math" : undefined }
  return res.status(200).json(body)
}

body と res の型付け

POST/PUT の body と、型付きの response に注釈を付けます。DTO はドキュメントとしても機能します。

import { Request, Response } from "express"

type CreateUserBody = { name: string }
 type CreateUserRes = { id: string; name: string }

export function createUser(req: Request<{}, CreateUserRes, CreateUserBody>, res: Response<CreateUserRes>) {
  const { name } = req.body
  const result: CreateUserRes = { id: "u_1", name }
  return res.status(201).json(result)
}

ルートを接続する

小さく型付けされたハンドラーを組み合わせます。ルート params はテンプレート（例: :id）との一致によって検証されます。

import express from "express"
import { getUser } from "./getUser"
import { createUser } from "./createUser"

const app = express()
app.use(express.json())

app.get("/users/:id", getUser)
app.post("/users", createUser)

app.listen(3000, () => console.log("http://localhost:3000"))

ヒント

ヒント:

DTO は小さく保ち、複数のハンドラーで再利用してください。
制約のある query 値には union リテラルを優先してください。
正確なステータスコードと型付き JSON を返してください。

Express の型付けの確認

クイックチェック: params と JSON body を持つ Express ハンドラーには、どのように型を付けますか。

対話的なレッスンで答える

まとめ

まとめ: ルート params、query、body、レスポンスに型を付けました。同じパターンをルーターやミドルウェアにも適用できます。

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 101
レッスン: 352

無料で学習を始めるコース全体を表示

よくある質問

「Routerハンドラー、Request/Responseの型付け」レッスンは無料ですか？

はい。「Routerハンドラー、Request/Responseの型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「Routerハンドラー、Request/Responseの型付け」で何を学びますか？

Expressのルートハンドラーでparams、query、JSON bodyに型を付け、res.jsonと再利用可能なDTOで型付きレスポンスを返しますブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/3です。

「Routerハンドラー、Request/Responseの型付け」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る