More than 3 years have passed since last update.

【TypeScript】VSCodeでTypeScriptの開発環境を構築する④（Node.js & Express）

Last updated at 2021-05-06Posted at 2021-05-05

#概要

VSCodeで TypeScript + Node.js + Express を使用した開発環境を構築します。

データサーバーは使用していません。
外部からローカルホストにリクエストを飛ばして、値を返すだけのAPIを作成し、そのデバッグ環境を構築します。

この記事は、以下のコースの受講に伴って、備忘録として書いています。詳しく知りたい方は、是非受講してみてください。

#環境

Windows10
TypeScript 4.2.4
VSCode

#構築

###インストール
####先にインストールするもの

npm install -g typescript

####プロジェクトの初期化
VSCodeで空のプロジェクトを開いて、ターミナルで以下を実行します。

package.jsonの作成

npm init

tsconfig.jsonの作成

tsc --init

####パッケージ
同様にVSCodeで、必要なパッケージをインストールします。

npm install --save express body-parser

npm install --save-dev nodemon @types/node @types/express

パッケージ	説明
express	expressライブラリ
body-parser	expressのサーバーで受け取ったリクエストのパラメーターをパースするためのパッケージ
nodemon	jsファイルをnode.jsで実行し、ファイルやフォルダの変更を監視してくれるパッケージ
@types/node	node.jsの型定義ファイル
@types/express	expressの型定義ファイル

###ファイルの設定

####package.json
nodemon を npm コマンドで実行できるように設定します。
debug はデバッグ用の設定で、--inspectを指定することで、実行中にアタッチできるようになります。

package.json

// ・・・
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon dist/app.js",
    "debug": "nodemon --inspect dist/app.js"
  }
// ・・・

####tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2018", 
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",

    /* Strict Type-Checking Options */
    "strict": true,

    /* Module Resolution Options */
    "moduleResolution": "Node",
    "esModuleInterop": true,

    /* Experimental Options */
    "experimentalDecorators": true,

    /* Advanced Options */
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

###デモファイルの作成
srcフォルダに、以下のようにデモファイルを作成しました。

ここでは、post のみ実装しています。

app.ts

import express, { Request, Response, NextFunction } from 'express';
import router from './routes/crud';
import { json } from 'body-parser';

// ミドルウェア関数の登録

const app = express();

// ポストリクエストにわたされたjsonをパースして、requestオブジェクトのbodyに格納する
app.use(json());

// /crud へのリクエストは、すべて router のルーティング設定を使用する
app.use('/crud', router);

// エラーをキャッチするためのミドルウェア関数
// next関数は、リクエストを次のミドルウェア関数に送る場合に実行する関数
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
	// ステータスコード(500)：インターナルサーバーエラー
	res.status(500).json({ message: err.message });
});

// ポート3000に接続
app.listen(3000);

crud.ts

import { Router } from 'express';
import { postFunc } from '../controllers/crudFunc';

const router = Router();

// サーバーを起動して指定したルートにリクエストがきたら、expressからpostFuncが自動的に実行される
router.post('/', postFunc);
// router.get('/', hoge);
// router.patch('/:id', hoge); // :id とすることで変数として扱える
// router.delete('/:id', hoge);

export default router;

crudFunc.ts

import { RequestHandler } from 'express';

/**
 * postリクエスト時の処理
 * @param req リクエスト
 * @param res レスポンス
 * @param next リクエストを次のミドルウェア関数に送る場合に実行する関数
 */
export const postFunc: RequestHandler = (req, res, next) => {
	const text = (req.body as { text: string }).text;

	// 何かしらの処理
	const something = `${text}（${new Date()}）`;

	// ステータスコード(201)：リクエストが成功し、新しいリソースが作成された
	res.status(201).json({ message: 'POSTリクエストを受け付けました。', created: something });
};

何かしらの処理の部分で、実際にはデータサーバーにデータをpostする処理などを行います。

#コンパイル＆デバッグ

###コンパイル
コンパイルは、ターミナルで以下のコマンドを実行します。

tsc

又は、

tsc -w

watchモード（tsc -w）を起動すると、tsファイルの変更を監視して、変更があったときは自動的に再コンパイルします。
終了する場合は、Ctrl + Cを押します。

###デバッグ
デバッグ用のlaunch.jsonファイルを作成します。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector"
        }
    ]
}