TypeScript・Express

ExpressとTypescript関係のモジュールのインストールについて。最初にExpressをインストールします。

npm install express

次に、Typescriptと、Expressの型宣言をインストールします。

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

開発環境用の設定

開発環境では、修正するたびに手動でTypescriptをコンパイルしたり、再起動したりするのは大変なので、それらの手間を省いてくれる ts-node-dev をインストールします。

npm install --save-dev ts-node ts-node-dev

Expressサーバー起動用ソースが、src/app.ts の場合、package.json の scriptsに以下を追加します。

{
  "scripts": {
    "server": "ts-node-dev src/app.ts"
  },
  ...
}

これで、以下を実行すると、Typescriptで書かれた src/app.ts をコンパイルして実行してくれます。

npm run server

正常に動作すれば、http://[IPアドレス]:3000/ でアクセスできます。

ここでは、ソースファイルを src/app.ts としています。これは、全てのリクエストに対して、HTTPステータスコードが200で、"test express" という文字列を返します。

import express from 'express';
import { Express, Response, Request } from 'express';

const app: Express = express();
app.get('/*', (req: Request, res: Response) => {
  res.status(200).send('test express');
});

const port = 3000
console.log(`Running Express. port: ${port}`);
app.listen(port);

ブラウザがGETでアクセスしてきたときの処理は、app.get('/*', ...) になります。ここでは、'/*' と指定していて、全てのGETアクセスを処理するようにしています。通常は、URLのパスごとに、処理を指定することになります。

この例では、ポート3000で動作するようにしているので、ブラウザで http://[IPアドレス]:3000 にアクセスして、”test express" と表示されたら正常に動作しています。

注意　Expressは、POSTデータ処理用の設定を行わないとPOSTデータ受信ができないので、この例もGETでしかデータを受け取れません。

セッションやPOST用の設定を含んだサンプルのAppServerクラスを使った起動用app.tsを以下のようにします。

import { AppServer } from './AppServer';

const server = new AppServer();
server.init();
server.start();

AppServerクラスは以下のようになります。セッション処理とPOSTデータ受信用の設定があります。

import * as express from 'express';
import { Express, Response, Request } from 'express';
import * as session from 'express-session';

export interface MySession extends session.SessionData {
  counter?: number;
}

export class AppServer {
  private app: Express;

  private port: number = 3000;

  public init() {
    const app = express();

    // POST用設定。
    app.use(express.json());
    app.use(express.urlencoded({ extended: true }));
  
    // セッション設定
    this.setSession(app);

    // ルーティング設定
    this.setRoute(app);

    this.app = app;
  }

  public start() {
    console.log(`Running Express. port: ${this.port}`);
    this.app.listen(this.port);
  }

  private setSession(app: Express) {
    const hour = 
    app.use(session({
      secret: 'my-test-key',
      resave: false,
      saveUninitialized: true,
      cookie: {
        maxAge: 60 * 60 * 1000  // ミリ秒
      }
    }));
  }

  private setRoute(app: Express) {
    app.get('/', (req: Request, res: Response) => {
      this.checkSession(req.session);

      res.status(200).send(`
        <html>
          <body>
            <h1>Post test</h1>
            <form action="/post" method="post">
              name: <input type="text" name="name" /><br />
              comment: <input type="text" name="comment" /><br />
              <input type="submit" value="send" />
            </form>
          </body>
        </html>
      `)
    });

    app.post('/post', (req: Request, res: Response) => {
      const comment: string = req.body.comment;
      const name: string = req.body.name;

      const sessId: string  = req.sessionID;
      console.log('sessionId: %O', sessId);

      this.checkSession(req.session);

      res.status(200).send(`
        <html>
          <body>
            <p>name: ${name}</p>
            <p>comment: ${comment}</p>
            <a href="/">return</a>
          </body>
        </html>
      `)
    });

    // 先に登録したURL以外を処理
    app.get('/*', (req: Request, res: Response) => {
      res.status(200).send('test express');
    });
    return app;
  }

  private checkSession(session: MySession) {
    if (session) {
      console.log('session: %O', session);
    } else {
      console.log('session is empty.');
    }

    if (!session.counter) {
      session.counter = 1;
    } else {
      session.counter += 1;
    }
  }
}

セッション

Expressでセッションを使用する場合、ミドルウェアexpress-sessionを使うことができます。インストールする場合は、以下を実行します。

npm install express-session

また、Typescirpt用に@types/express-sessionもインストールします。

npm install --save-dev @types/express-session

セッション初期化は、専用メソッドを用意していて、以下になります。

  private setSession(app: Express) {
    const hour = 
    app.use(session({
      secret: 'my-test-key',
      resave: false,
      saveUninitialized: true,
      cookie: {
        maxAge: 60 * 60 * 1000  // ミリ秒
      }
    }));
  }

ここでは、session.cookie.maxAge でセッションの有効期間（単位ミリ秒）を指定しています。この例では、60 * 60 * 1000 ミリ秒(60分）を指定しています。

POST用設定

Expressは、POST用設定を行わないと、POSTによるデータ受け渡しができません。 POSTを許可するためには、ミドルウェアbody-parserをインストールして設定するか、v4.17.0 以降に使えるようになった express.jsonの設定が必要となります。

Express 4.x API・express.json

このサンプルでは、express.jsonをつかって、以下のように設定しています。

    const app = express();

    app.use(express.json());
    app.use(express.urlencoded({ extended: true }));

POSTデータの取得は、以下のようになります。

    app.post('/post', (req: Request, res: Response) => {
      const comment: string = req.body.comment;
      const name: string = req.body.name;
      ...
    });

TypeScript・Express

インストール

開発環境用の設定

簡単な起動用サンプル

セッションやPOST用の設定を含んだサンプル

セッション

POST用設定

新着

人気記事