Angular 1とTypeScript - AngularJS Advent Calendar 2015

Angular1で作ったモジュールをTypeScriptを使ったものに変更してます。このエントリーは「AngularJS Advent Calendar 2015」12月3日の記事です。

まだ余計なところ書き方が間違っているところがありますが、慣れたらそんなに面倒でも無いと思う。個人で開発するならTypeScriptは使わないかなと思うがエンタープライズで開発する場合は使ったほうが間違いがないんじゃないかなと思ってる。

やってること

Module

JavaScript:

(function () {
  'use strict';
  …
})();

TypeScript:

module about {
  'use strict';
  …
}

ClassおよびConstructor

JavaScript:

  function AboutController(FilesService) {
    this.FilesService = FilesService;
  }

TypeScript:

export class AboutController {
  constructor (FilesService: IFilesService) {
    this.FilesService = FilesService;
  };
}

$inject

JavaScript:

AboutController.$inject = ['FilesService'];

TypeScript:

public static $inject = ['FilesService'];

Method

JavaScript:

  AboutController.prototype.activate = function() {
    vm = this;
    var files = vm.FilesService.query().$promise;
    files
      .then(function(list) {…})
      .catch(function(e) {…});
  };

TypeScript:

   public activate(): void {
      var files = this.FilesService.query().$promise;
      files
        .then((list): void => {this.list = list})
        .catch((e): void => {this.error = e});
    };

最後に

書き換えるだけじゃなくgrunt/gulp環境も変更するので色々作業が発生しますが触っていこう。