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

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">
</div>
</body>
HTML
JS
!
{
!
};
};

angular.module('MyAngularJs', [/*...*/]); // Setter
!
{
!
};
};
!
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
) {
!
};
}
}
!
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
) {
!
};
}
}
!

TS
declare var angular: any;
!
class SampleCtrl {
constructor (
public $scope
) {
!
};
}
}
!

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

TS
// ...
!
class SampleCtrl {
constructor (
public $scope
) {
!
};
}
}
!
// ...
!
ここが増えそうなのは
目に見えている…

TS
constructor (
public $scope
) {
this.init();
!
};
}
!
private init()
{
}

TS
constructor (
public $scope
) {
this.init();
}
!
private init()
{
// ...
}
!
public getFullName(): string
{
}

return // ...
};

TS
constructor (
public $scope
) {
this.init();
this.$scope.getFullName = this.getFullName.bind(this);
}
!
private init()
{
// ...
}
!
public getFullName(): string
{
}

<body ng-app>
<div ng-controller="SampleCtrl">
<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;
}
}
!
.controller('SampleCtrl', [SampleCtrl]);

.factory('MyProvider', ['otherProvider', function (otherProvider) {
return new MyProvider(otherProvider);
}]);
JS
.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);
};
}
}
!
.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}
};
}
!
public fetchEntity(id: my.obj.EntityId): IPromiseReturnEntity {
!
TS

isArray: true}
};
}
!
public fetchEntity(id: number): IPromiseReturnEntity {
!
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);
};
}
}
!
.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>();
↓
.query();
↓
.$promise
↓

.query();
↓
.$promise
↓
.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

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to TypeScriptで書くAngularJS @ GDG神戸2014.8.23 (20)

Recently uploaded (20)

TypeScriptで書くAngularJS @ GDG神戸2014.8.23