yoを使ってExpressJSをTypeScriptで始めてみよう（VS Code）

Yeomanを使って簡単にTypeScriptでExpressJSを始めてみたいと思います。

The web's scaffolding tool for modern webapps | Yeoman

npm install -g yo # まだインストールしてない場合
yo

yoコマンドを打ち込んだらウィザードが始まります。Install a generatorを選んでジェネレータをインストールします。

検索画面になるのでtypescriptと打ち込んでexpress-tsを選んでEnterを押します。 そうするとジェネレータがインストールされます。

次にyoコマンドを打ち込んだらExpress TSを選んでEnterを押します。 そして、プロジェクトフォルダを作るかと切れるのでそのままEnter。 適当な名前を入れてEnter。 テンプレートエンジンを選ぶように促されるのでデフォルトのjadeを選んでEnter。

npmとかの依存ライブラリのインストールが始まります。そして、終わったらプロジェクトフォルダに移動して、TypeScriptの型定義ファイルをインストールします。

tsd install

そして、gulpfile.js用に以下のコマンドを打ち込んでgulpとgulp-typescriptを入れておきます。

npm install gulp gulp-typescript --save-dev

ここまで終わったらcode .と打ち込んでVS Codeを起動します。

gulpfile.jsを作ってsrcフォルダの中身をコンパイルしてappフォルダに出力するスクリプトを書きます。

var gulp = require('gulp');
var ts = require('gulp-typescript');

gulp.task('build', function() {
    var project = ts.createProject('./tsconfig.json');
    return gulp.src('./src/**/*.ts')
        .pipe(ts(project))
        .js
        .pipe(gulp.dest('./app'));
});

Ctrl + Shift + Bでビルドします。

F5を押してデバッグ実行でNode.jsを選択します。app/bin/www.jsが選ばれてるはずなので、そのままもう一度F5を押して実行します。

http://localhost:3000/にアクセスすれば画面が表示されます。