typescriptをやってみる

typescriptでも触ってみようということで、gulpで環境をつくってみます

ゴールは、

  • tsファイルを監視して、ファイルが更新されたら、コンパイルしてjsファイルを出力する

構築

package.jsonを作成

npm init コマンドでpackage.jsonのひな形を作成。入力内容は適当に。

1

$ npm init

とりあえず、こんな感じにしておく。

1
2
3
4
5
6
7
8
9

{
  "name": "gulp_typescript",
  "version": "1.0.0",
  "description": "gulp for typescript",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

gulpをローカルにインストール

ローカルイントールで、–save-devオプションでpackage.jsonを更新する

1

$ npm install --save-dev gulp

gulpfile.jsを作成

タスクをファイル分割して管理出来るようにrequire-dirをインストール

1

$ npm install --save-dev require-dir

gulpfile.js

1
2
3
4

var dir = require('require-dir');
dir('./gulp/tasks', {
  recurse: true
});

default.jsを作成

gulpコマンド実行時に最初に読み込むタスクファイル gulpのタスクを保存していく ./gulp/tasks とtypescript用 ./src/ts と実行後のjavascript用 ./src/js を作成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

$ tree -L 2
.
├── gulp
│   └── tasks
├── gulpfile.js
├── node_modules
│   ├── gulp
│   └── require-dir
├── package.json
└── src
    ├── js
    └── ts

7 directories, 2 files

./gulp/tasks/default.jsの内容 "watch"タスクを実行しますよってことなので、次にwatchタスクをつくる

./gulp/tasks/default.js

1
2
3

var gulp = require("gulp");

gulp.task("default", ["watch"]);

watch.jsを作成

ファイル監視するためにgulp-watchをインストール

1

$ npm install --save-dev gulp-watch

./gulp/tasks/watch.jsの内容対象ファイルに変更があったら、"tsc"タスクを実行しますよってこと 対象のファイルは、configから読みこむようにする

./gulp/tasks/watch.js

1
2
3
4
5
6
7
8
9

var gulp = require("gulp");
var watch = require("gulp-watch");
var config = require("../config");

gulp.task("watch", function() {
  watch(config.ts.src, function() {
    gulp.start(["tsc"]);
  });
});

./gulp/config.js

1
2
3
4
5

module.exports = {
  ts: {
    src: "./src/ts/**/*.ts",
  }
};

tsc.js

typescriptのコンパイラとしてgulp-typescriptをインストール

1

$ npm install --save-dev gulp-typescript

./gulp/config.jsに設定追加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

module.exports = {
  ts: {
    src: "./src/ts/**/*.ts",
    dest: "./src/js",
    options: {
      removeComments: true,
      noImplicitAny: true,
      noLib: false,
      noEmitOnError: false,
      target: "ES5"
    }
  }
};

./gulp/tsc.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var gulp = require("gulp");
var ts = require("gulp-typescript");
var config = require("../config");

gulp.task("tsc", function() {
  gulp.src(config.ts.src)
    .pipe(ts(config.ts.options))
    .js
    .pipe(gulp.dest(config.ts.dest));
});

gulpを実行する

なんかwatchしてるっぽい

1
2
3
4
5
6

$ gulp
[17:03:52] Using gulpfile ~/gulpfile.js
[17:03:52] Starting 'watch'...
[17:03:52] Finished 'watch' after 6.91 ms
[17:03:52] Starting 'default'...
[17:03:52] Finished 'default' after 10 μs

適当なtypescriptのファイルをおいてみる

./src/ts/sample.ts

1
2
3
4
5
6
7
8

class Greeter {
  constructor(public greeting: string) { }
  greet() {
    return "<h1>" + this.greeting + "</h1>";
  }
};
var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();

./src/js/sample.js ができてますね

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var Greeter = (function () {
  function Greeter(greeting) {
    this.greeting = greeting;
  }
  Greeter.prototype.greet = function () {
    return "<h1>" + this.greeting + "</h1>";
  };
  return Greeter;
})();
;
var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();