サーバーサイドをTypeScriptで開発する

型があるJavaScriptを書きたいなと思い、サーバーサイドをTypeScriptで開発する方法を調べてみました。

開発環境

OS: Mac
TypeScript: 2.0.3

Node.jsをインストール

Node.jsのインストール方法は、Node.jsでHello Worldをご参考ください。

TypeScriptのインストール

TypeScriptのインストールは、ターミナル上で以下のコマンドを実行します。

$ npm i -g typescript
$ tsc --version
Version 2.0.3

型定義ファイルをのインストール

typescriptではJavaScriptで実装されたライブラリの型チェックを行うために、.d.ts拡張子の型定義ファイルを用意する必要があります。

以前まではtsdやtypings等の管理ツールで管理をする必要があったのですが、TypeScript2.0よりnpmのみで管理することが出来るようになりました。

参考: 特別なツール不要！ TypeScript 2.0時代の型定義ファイルの取り扱い方

npmを利用した型定義ファイルのインストールは以下の形式で行うことができます。
利用可能な型定義ファイルについてはTypes Search上で検索することが出来ます。

$ npm i --save @types/<型定義ファイル名>

package.jsonを作成して、node.jsの型定義ファイルをインストールします。

$ npm init
$ npm i --save @types/node

vscodeでintellijence機能を使うためにtsconfig.jsonも生成しておきます。

$ tsc --init

処理を実装

以下の内容をserver.tsというファイル名で保存します。
TypeScript2.0よりreferenceで型定義ファイルのパスの指定が不要になりました。

import http = require('http')

class Server {
    constructor() {
        const server: http.Server = http.createServer(
            (request: http.ServerRequest, response: http.ServerResponse) => {
                this.requestHandler(request, response)
            })
        
        server.listen('5000')
    }

    private requestHandler(request: http.ServerRequest, response: http.ServerResponse):void {
        response.end('Hello World')
    }
}

const server:Server = new Server()

TypeScriptのコンパイル

以下のコマンドで、server.tsをコンパイルします。

$ tsc server.ts

ブラウザで確認する

無事にコンパイルが成功した場合は、同じ階層内にserver.jsが生成されています。 以下のコマンドで生成されたserver.jsを実行して、http://localhost:5000にアクセスすれば下の画像のように表示されると思います。

$ node server.js

vscodeでTypeScript2.0を利用する設定

Code > Preferences > Workspace Settingsに以下の記述を追記

{
  // typescriptをグローバルインストールしている場合
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
  
  // typescriptをローカルインストールしている場合
  // "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

さいごに

前にも一度TypeScriptを少しだけ触ったことがあったのですが、TypeScript2.0になってから、型定義ファイルの扱いがかなり楽になっていました。
改めて少しTypeScript勉強しようかなと思います。