TypeScriptで書くAngularJS @ GDG神戸2014.8.23

Database RESTfulAPI Controller HTML 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

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 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

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 // ... ! 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

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]);

angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); 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( TS

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>(); ↓ ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス

ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ 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>

ng.IPromise<ng.resource.IResourceArray<T>>  (promiseValue: T) "ng.resource.IResourceArray<T>" ! "ng.resource.IResourceArray<T>" $resource<T>() IResourceArray<T> ! $resource<T>() .then()

TypeScriptで書くAngularJS @ GDG神戸2014.8.23

by armorik83

on Aug 23, 2014

Statistics

Views

Actions

1 Embed 4

Accessibility

Categories

Upload Details

Usage Rights

Report content

TypeScriptで書くAngularJS @ GDG神戸2014.8.23 Presentation Transcript