TypeScriptで書くAngularJS @ GDG神戸2014.8.23

DatabaseRESTful API

ControllerHTML

JSON

http://www.typescriptlang.org/

Class.prototype.method = function(){…

class Greeter { private greeting: string; constructor(message: string) { this.greeting = message; } public greet() { return 'Hello, ' + this.greeting; } } !var greeter = new Greeter('world'); !var button = document.createElement('button'); button.textContent = 'Say Hello'; button.onclick = () => { alert(greeter.greet()); }; !document.body.appendChild(button); TS

var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return 'Hello, ' + this.greeting; }; return Greeter; })(); !var greeter = new Greeter('world'); !var button = document.createElement('button'); button.textContent = 'Say Hello'; button.onclick = function () { alert(greeter.greet()); }; document.body.appendChild(button); //# sourceMappingURL=greeter.js.map JS



var foo = 'abc';var foo: string = 'abc';

<body ng-app> <div ng-controller="SampleCtrl"> <strong>First name:</strong> {{firstName}}<br> </div> </body> HTML

JS

function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; };

<body ng-app> <div ng-controller="sampleCtrl"> <strong>First name:</strong> {{firstName}}<br> </div> </body> HTML

JS

!

function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; };

angular.module('MyAngularJs', [/*...*/]); // Setter !function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; }; !angular.module('MyAngularJs') // Getter .controller('SampleCtrl', [ '$scope', // 使用するServiceは全て文字列で表記 SampleCtrl ]); JS

angular.module('MyAngularJs', [/*...*/]); // Setter !function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; }; !angular.module('MyAngularJs') // Getter .controller('SampleCtrl', [ '$scope', // 使用するServiceは全て文字列で表記 SampleCtrl ]); JS

TS

// ... class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } !angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);

// ... class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } !angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]); TS

class SampleCtrl { constructor ( public $scope ) { // ... } } !class SampleCtrl { public $scope; constructor ($scope) { this.$scope = $scope; // ... } }

TS

/sample.ts(1,1): Cannot find name 'angular'.

http://definitelytyped.org/

TS

/// <reference path="angularjs/angular.d.ts" /> !class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } !angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);

TS

declare var angular: any; !class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } !angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);

TS

declare var angular: any; !class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } !angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);

TS

// ... !class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } !// ...

TS

// ... !class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } !// ...

!

ここが増えそうなのは目に見えている…

TS

constructor ( public $scope ) { this.init(); ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } !private init() { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; }

TS

constructor ( public $scope ) { this.init(); } !private init() { // ... } !public getFullName(): string { return this.$scope.firstName + ' ' + this.$scope.lastName; }

?!

this.$scope.getFullName = () => { return // ... };

TS

constructor ( public $scope ) { this.init(); this.$scope.getFullName = this.getFullName.bind(this); } !private init() { // ... } !public getFullName(): string { return this.$scope.firstName + ' ' + this.$scope.lastName; }

<body ng-app> <div ng-controller="SampleCtrl"> <strong>First name:</strong> {{firstName}}<br> <strong>Last name:</strong> {{lastName}}<br> <strong>Full name:</strong> {{getFullName()}}<br> </div> </body>

HTML

<body ng-app> <div ng-controller="SampleCtrl as c"> <strong>First name:</strong> {{c.firstName}}<br> <strong>Last name:</strong> {{c.lastName}}<br> <strong>Full name:</strong> {{c.getFullName()}}<br> </div> </body>

HTML

<body ng-app> <div ng-controller="SampleCtrl as c"> <strong>First name:</strong> {{c.firstName}}<br> <strong>Last name:</strong> {{c.lastName}}<br> <strong>Full name:</strong> {{c.getFullName()}}<br> </div> </body>

HTML

TS

class SampleCtrl { public firstName: string; public lastName: string; ! constructor () { this.init(); } ! private init() { this.firstName = 'John'; this.lastName = 'Doe'; } ! public getFullName(): string { return this.firstName + ' ' + this.lastName; } } !angular.module('MyAngularJs') .controller('SampleCtrl', [SampleCtrl]);

TS

class SampleCtrl { public firstName: string; public lastName: string; ! constructor () { this.init(); } ! private init() { this.firstName = 'John'; this.lastName = 'Doe'; } ! public getFullName(): string { return this.firstName + ' ' + this.lastName; } } !angular.module('MyAngularJs') .controller('SampleCtrl', [SampleCtrl]);

{{c.$scope.firstName}}

angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS

angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]);

JS



JS



JS

TS

class MyResource { constructor( private $q: ng.IQService, private $resource: ng.resource.IResourceService ) { // ... } ! private resource(): IResourceClass { var baseApi = '/api/entities'; var params: any = null; var actions = { getWithEntityId: { method: 'GET', url: baseApi+'/:id', isArray: true} }; return <IResourceClass>this.$resource(baseApi, params, actions); } ! public fetchEntity(id: my.obj.EntityId): IPromiseReturnEntity { var dfd = this.deferAcceptEntity(); ! var query = {id: id}; this.resource().getWithEntityId( query, this.success(), this.failure() ).$promise.then(this.fetchThen(dfd)); ! return dfd.promise; } private fetchThen(dfd: IDeferredAcceptEntity): (res: my.obj.IEntities) => void { return (res) => { var e: my.obj.IEntity = res[0]; dfd.resolve(e); }; } } !angular.module('MyAngularJs') .service('MyResource', ['$q', '$resource', MyResource]);

class MyResource { constructor( private $q: ng.IQService, private $resource: ng.resource.IResourceService ) { // ... } ! private resource(): IResourceClass { var baseApi = '/api/entities'; var params: any = null; var actions = { getWithEntityId: { method: 'GET', url: baseApi+'/:id', isArray: true} }; return <IResourceClass>this.$resource(baseApi, params, actions); } ! public fetchEntity(id: my.obj.EntityId): IPromiseReturnEntity { var dfd = this.deferAcceptEntity(); ! var query = {id: id}; this.resource().getWithEntityId( query,

TS

url: baseApi+'/:id', isArray: true} }; return <IResourceClass>this.$resource(baseApi, params, actions); } ! public fetchEntity(id: number): IPromiseReturnEntity { var dfd = this.deferAcceptEntity(); ! var query = {id: id}; this.resource().getWithEntityId( query, this.success(), this.failure() ).$promise.then(this.fetchThen(dfd)); ! return dfd.promise; } private fetchThen(dfd: IDeferredAcceptEntity): (res: my.obj.IEntities) => void { return (res) => { var e: my.obj.IEntity = res[0]; dfd.resolve(e); }; } } !angular.module('MyAngularJs') .service('MyResource', ['$q', '$resource', MyResource]); TS

$resource<T>(); ↓

ng.resource.IResourceClass<T>型のインスタンス .query();

↓ ng.resource.IResourceArray<T>型のインスタンス

.$promise ↓

ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス

!嫌んなってきた

$resource<T>(); ↓



.$promise ↓

ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス



.$promise ↓

ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス.then<TResult>( successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any ): IPromise<TResult>



.$promise ↓

ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス.then<TResult>( successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any ): IPromise<TResult>

ng.IPromise<ng.resource.IResourceArray<T>>(promiseValue: T)

"ng.resource.IResourceArray<T>"

!

"ng.resource.IResourceArray<T>"

$resource<T>() IResourceArray<T>

!

$resource<T>()

.then()

Engineering

TypeScriptで書くAngularJS @ GDG神戸2014.8.23