サーバーサイドを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勉強しようかなと思います。