ExpressをTypeScriptで設定する手順(ソースコード付き)

# 初めに

Node.jsで最もスタンダードなバックエンドフレームワークはExpressです。

しかしTypeScriptを使うのが当たり前の現在、ExpressのテンプレートはJavaScriptで生成されます。

今回の記事はExpressをTypeScriptで設定するための手順・考え方を紹介します。

# 全体の手順

以下の手順で設定していきます。

# Expressの設定

まず、Expressプロジェクトの設定をしていきます。

## express-generatorのインストール

まず初めに、expressのテンプレートプロジェクトを生成する`express-generator`をインストールします。

$ npm install -g express-generator

## expressプロジェクトの生成

任意のディレクトリにexpressのプロジェクトを設定していきます。
今回は`express-ts`ディレクトリにプロジェクトを作っていきます。

$ mkdir express-ts
$ cd express-ts
$ express --git

# TypeScriptのインストール・設定

TypeScriptの設定をしていきます。

## TypeScriptのインストール

$ npm install -g typescript

## TypeScriptの初期化

$ tsc --init

## ExpressのNode.jsの型情報のインストール

Expressをコンパイルできるようにnodeの型定義とexpressの型定義をインストールします。
`-D`オプションは、`devDependencies`としてライブラリをインストールするためのものです。型定義はコンパイル時には必要ですが、実行時には不要なファイルとなります。
`devDependencies`としてインストールされたファイル群は実行時のファイルには含まれず、実行ファイルが軽くなるメリットがあります。

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

# Gitの設定

expressで生成された.gitignoreファイルにdistを追加します。distディレクトリはコンパイル後のファイルが含まれるディレクトリのため、ソースコード管理は不要です。

// .gitignore
dist
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# ディレクトリ構成の変更

これから,typescriptに対応するためのファイルの書き換えとディレクトリ構成の変更を行います。
ディレクトリ構成を変更することでソースコードの管理をしやすくしたり、実行ファイルの相対パスが壊れないようにします。

## srcディレクトリの作成

TypeScriptのソースファイルは全て`src`配下に格納します。

$ mkdir src
$ mv app.js src/
$ mv bin src/www src
$ mv routes src/

以下のようなファイル構成となります。

.
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── src
│   ├── app.js
│   ├── bin
│   │   └── www
│   └── routes
│       ├── index.js
│       └── users.js
├── tsconfig.json
└── views
   ├── error.jade
   ├── index.jade
   └── layout.jade

# JavaScriptからTypeScriptへの書き換え

TypeScriptにソースコードを書き換えていきます。

## 拡張子を.tsに変更していきます。

$ mv src/routes/index.js src/routes/index.ts
$ mv src/routes/users.js src/routes/users.ts
$ mv src/app.js src/app.ts
$ mv src/bin/www src/bin/www.ts

## index.ts, users.tsの書き換え

Typescriptに書き換える場合は以下の手順が必要です。
1. `var`は`const`に書き換える。
2. `exports.module = router`の記述は`export {router}`に書き換え, requireはimportに書き換えてTypeScriptのモジュールシステムを利用。
3. `req`, `res`, `next`などに型を付与。

*最後にここで設定したプロジェクトのリンクを紹介します。