Angular2 for TypeScript - albatrosary's blog

これまで行ってきた「Angular2 for JavaScript」をいよいよTypeScriptに書き換えます。Angular2チュートリアルにコードがあるので「書く」という意味ではわざわざブログにするものではありませんが、JavaScript からTypeScriptに書き変えることで、モジュールローダ、アノテーション等の役割が理解できると思います。

利用するライブラリ等はAngular2チュートリアルに従います

インストールするツール

次のツールをnpmインストールします。

npm i typescript --save-dev
npm i concurrently --save-dev
npm i lite-server --save-dev

これらライブラリを利用するためのコマンドをpackage.jsonに定義します。

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },

次にTypeScriptの設定ファイルを追加します。

(tsconfig.json)

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

モジュールの書き換え

JavaScriptで書かれたコードをTypeScriptで書き換えます

main.ts

main.jsをTypescriptで記述します

(scripts/main.js)

System.register(['angular2/platform/browser', '../components/home/home'], function(exports) {
  ...
});

は

(scripts/main.ts)

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from '../components/home/home'

settersやexecuteは記載する必要が無くbrowser.bootstrap(app.AppComponent);の部分は

bootstrap(AppComponent);

home.ts

同様に

(components/home/home.ts)

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  templateUrl: 'components/home/home.html'
})
export class AppComponent {
  public name = 'Angular';
}

だいぶシンプルに書くことができる。ビルド&実行はnpm startです。完全なコードは

GitHub - albatrosary/Angular2Study at step8

最後に

４回に渡ってAngular2をJavaScriptで書き、SystemJSの利用、最後はTypeScriptへと移行してきました。Angular2では多くのライブラリを利用していますが、その背景や用途が理解できた。ようやくAngular2に深く入れる気がする。

Angular2 for JavaScript - albatrosary's blog

Todos in Angular2 for JavaScript - albatrosary's blog

Angular2 for JavaScript with SystemJS - albatrosary's blog