TypeScriptでAngular1.5を書けるようにする

Webアプリを作ることになったので、Angularフレームワークを使ってTypeScriptで書くことにしました。そこでこの組み合わせでさくっとセットアップできなかったので方法を残しておきます。

セットアップ

AngularとTypeScript、Typingsをインストールする。

$ bower install --save angular
$ npm install -g typescript
$ npm install -g typings

TypingsはTypeScriptの型定義ファイルを管理するツールで、TypeScript標準で存在しない型の補助をしてくれます。 今回はAngularと依存しているjQueryの型定義をインストールする。

$ typings install --save --global dt~angular
$ typings install --save --global dt~jquery

Webアプリの設定

HTMLでAngularを読み込む。

<head>
  <script src="./bower_components/angular/angular.min.js"></script>
  <script src="todo.js"></script>
</head>

TypeScriptファイルの先頭で型定義ファイルを指定する。これでTypeScript内でangularなどの変数を使ってもエラーが出なくなります。

/// <reference path="./typings/index.d.ts" />

var app = angular.module('todoApp', [])
...

これでTypeScriptファイルをコンパイルできるようになり、JavaScriptファイルが正常に出力されます!

https://gist.github.com/t-kashima/24d97cddca0ba5e9b14b9e86c2ba81c4