Node.jsの実装をTypeScriptでやった事が無かったので試しにやってみました。

express todo

で生成したテンプレートプロジェクトをそのままTypeScriptに実装し直しただけです。

環境構築

参考：docker-compose(Docker for mac)で実践的なnode.js開発環境を作る）
Node.js:9.11.1
TypeScript:2.8.1

一連の下記の作業をやるとこんな感じのディレクトリ構成になる

設定ファイルの準備

docker-compose.yml

version: '3'

services:
  nginx:
    image: nginx:alpine
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - "./conf.d:/etc/nginx/conf.d"
    links:
      - node_express

  node_express:
    image: node:9.11.1-alpine
    container_name: node_express
    hostname: node_express
    volumes:
      - ".:/src"
    working_dir: /src
    command: >
      "npm i typings -g
      && npm i -D typescript tslint ts-node nodemon shelljs @types/cookie-parser @types/morgan @types/shelljs --save
      && typings i debug express http-errors
      && npm i jade debug http-errors express cookie-parser morgan path --save
      && npm run-script build
      && npm start"
    ports:
      - "3000:3000"

conf.d/nodejs.conf

server {
    listen 80;
    server_name _;
    client_max_body_size 10M;
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://node_express:3000/;
    }
}

テンプレートプロジェクト生成

express todo

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options

   create : todo/
   create : todo/public/
   create : todo/public/javascripts/
   create : todo/public/images/
   create : todo/public/stylesheets/
   create : todo/public/stylesheets/style.css
   create : todo/routes/
   create : todo/routes/index.js
   create : todo/routes/users.js
   create : todo/views/
   create : todo/views/error.jade
   create : todo/views/index.jade
   create : todo/views/layout.jade
   create : todo/app.js
   create : todo/package.json
   create : todo/bin/
   create : todo/bin/www

   change directory:
     $ cd todo

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=todo:* npm start

テンプレートプロジェクトのイメージをビルドして起動

docker-compose -p todo up -d --build

docker-compose ps
    Name                  Command               State           Ports         
------------------------------------------------------------------------------
nginx          nginx -g daemon off;             Up      0.0.0.0:80->80/tcp    
node_express   sh -c npm install && npm start   Up      0.0.0.0:3000->3000/tcp

ページにアクセス

http://localhost:3000/

NodeのJavaScript実装をTypeScript実装に置換

tsconfig.jsonを設定

targetは"es5"にしておかないと、Node.jsでは、ES6のimport構文などがエラーで動かないので注意。
importでも動くようにするには、ESM（ECMAScript Modules）対応が必要
参考：Node v9 でフラグ付きで ES Modules の import/export 構文を使用する

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "./src/typings"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include": [
    "bin/**/*.ts",
    "src/**/*.ts"
  ]
}

package.jsonにタスクランナーを定義

"start"で起動するスクリプトをbin/www→./dist/bin/www.jsに変更
後はビルド用タスクなどを追加
viewsをdistへコピーするためのcopy-static-assetsは下で別途作成する

package.json

{
  "name": "todo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./dist/bin/www.js",
    "debug": "nodemon --inspect ./dist/bin/www.js",
    "build": "npm run build-ts && npm run copy-static-assets",
    "build-ts": "tsc",
    "tslint": "tslint -c tslint.json -p tsconfig.json",
    "copy-static-assets": "ts-node copyStaticAssets.ts"
  },
  "dependencies": {
    "cookie-parser": "^1.4.3",
    "debug": "~2.6.9",
    "express": "^4.16.3",
    "http-errors": "^1.6.3",
    "jade": "~1.11.0",
    "morgan": "^1.9.0",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "@types/cookie-parser": "^1.4.1",
    "@types/express": "^4.11.1",
    "@types/http-errors": "^1.6.1",
    "@types/morgan": "^1.7.35",
    "shelljs": "^0.8.1",
    "ts-node": "^5.0.1",
    "tslint": "^5.9.1",
    "typescript": "^2.8.1",
    "typings": "^2.1.1"
  }
}

viewsをdistへコピーするcopy-static-assetsを作成

copyStaticAssets.ts

import * as shell from 'shelljs';
shell.cp('-R', 'src/views', 'dist/src/views/');

型定義追加

src/typings.d.ts

declare module global {
  type Error = {
    message: string;
    status: number;
  }
}

起動スクリプト

requireをimport文に変更
functionの引数と戻り値の型宣言を追加

bin/www.ts

#!/usr/bin/env node

/**
 * Module dependencies.
 */

import app from '../src/app';
import * as debugModule from 'debug';
import * as http from 'http';

const debug = debugModule('todo:server');

/**
 * Get port from environment and store in Express.
 */

const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val: string): number | string | boolean {
  const nport = parseInt(val, 10);

  if (isNaN(nport)) {
    // named pipe
    return val;
  }

  if (nport >= 0) {
    // port number
    return nport;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error): void {
  if (error.syscall !== 'listen') {
    throw error;
  }

  const bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening(): void {
  const addr = server.address();
  const bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

メイン処理

requireをimport文に変更
functionの引数と戻り値の型宣言を追加
module.exportsをexport defaultに変更

src/app.js

import { Router, NextFunction, Request, Response } from 'express';

import * as createError from 'http-errors';
import * as express from 'express';
import * as path from 'path';
import * as cookieParser from 'cookie-parser';
import * as logger from 'morgan';

import indexRouter from './routes/index';
import usersRouter from './routes/users';

const app: express.Express = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use((req: Request, res: Response, next: NextFunction) => {
  next(createError(404));
});

// error handler
app.use((err: global.Error, req: Request, res: Response, next: NextFunction) => {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

export default app;

ルーティング処理

requireをimport文に変更
functionの引数と戻り値の型宣言を追加
module.exportsをexport defaultに変更
あまり関係ないがtry-catch入れておく

src/routes/index.ts

import { Router, NextFunction, Request, Response } from 'express';

const router: Router = Router();

/* GET home page. */
router.get('/', (req: Request, res: Response, next: NextFunction) => {
  try {
    res.render('index', { title: 'Express' });
  } catch (err) {
    next(err);
  }
});

export default router;

src/routes/users.ts

import { Router, NextFunction, Request, Response } from 'express';

const router: Router = Router();

/* GET users listing. */
router.get('/', (req: Request, res: Response, next: NextFunction) => {
  try {
    res.send('aaarespond with a resource');
  } catch (err) {
    next(err);
  }
});

export default router;

TypeScriptをビルド

npm run build

ページにアクセス

http://localhost:3000

うむ。ちゃんと表示された。ミッション完了。

感想

しかし、es5にしないとimport文が動かないのか。
ESMとかいう、拡張子.mjsの形式だと、import文そのまま使えるらしい。
少しやってみたけど、それほど簡単には行かなさそうだ。
参考：Node v9 で ES Module import を使ってみる

次回予告

今回は単純にTypeScriptに置換しただけですが、もう少しリファクタリングしていこうかと思います。
ちゃんとクラス構文を使うことにします。

以前、これからWeb開発のバックエンドを学ぶ in 2018（PHP7編 - 1.0日目）｜DDDへ向かって行く
で、Laravel5.6でのルーティング処理をコントローラークラスに移譲するようにしましたが、
routes内のコントローラー処理をアレと同じ感じにできるはずだ。

参考（修正履歴）

https://github.com/masaaki-uegaki/todo/commit/b75ac3529898de12eaa8d420737c48894011c57c

express-generatorで生成したテンプレートプロジェクトをTypeScript実装に置換

環境構築

設定ファイルの準備

テンプレートプロジェクト生成

テンプレートプロジェクトのイメージをビルドして起動

ページにアクセス

NodeのJavaScript実装をTypeScript実装に置換

tsconfig.jsonを設定

package.jsonにタスクランナーを定義

viewsをdistへコピーするcopy-static-assetsを作成

型定義追加

起動スクリプト

メイン処理

ルーティング処理

TypeScriptをビルド

ページにアクセス

感想

次回予告

参考（修正履歴）