More Related Content Similar to ng-japan 2015 TypeScript+AngularJS 1.3 (20) More from Masahiro Wakame (20) 10. AtScript
• AtScript == ES6+A!
• A == Annotations (Decorators)!
• AnnotationsはES6に含まれない!
• Super set of TypeScript!
• type annotations
http://goo.gl/5z43FE
http://goo.gl/Rs5rea
from AngularJS team!
18. // Type definitions for Angular JS 1.3+
// Project: http://angularjs.org
// Definitions by: Diego Vilar <http://github.com/diegovilar>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts" />
declare var angular: angular.IAngularStatic;
// Support for painless dependency injection
interface Function {
$inject?: string[];
}
// Collapse angular into ng
import ng = angular;
// Support AMD require
declare module 'angular' {
export = angular;
}
///////////////////////////////////////////////////////////////////////////////
// ng module (angular.js)
///////////////////////////////////////////////////////////////////////////////
declare module angular {
// not directly implemented, but ensures that constructed class implements $get
interface IServiceProviderClass {
new (...args: any[]): IServiceProvider;
}
interface IServiceProviderFactory {
(...args: any[]): IServiceProvider;
}
// All service providers extend this interface
interface IServiceProvider {
$get: any;
}
interface IAngularBootstrapConfig {
既存JSに型を後付けする
http://goo.gl/xbjtzy
19. それを使う
///<reference path='../typings/angularjs/angular.d.ts' />
///<reference path='../typings/angularjs/angular-route.d.ts' />
module App {
"use strict";
angular.module(
"app",
[“ngRoute”, “app.hello”],
($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider)=> {
$routeProvider
.when("/sample", {
templateUrl: "/template/sample.html"
})
.otherwise({
templateUrl: "/template/main.html"
});
$locationProvider.html5Mode(true);
}
)
.run(($rootScope: ng.IRootScopeService, $routeParams: ng.route.IRouteParamsService)=> {
false;
})
;
angular.module(
"app.hello",
[],
()=> {
false;
}
)
.service("sampleService", Service.SampleService)
.controller("SampleTestController", Sample.TestController)
;
22. AtScript to TypeScript
• TypeScriptに必要な要素が入る!
• 作りたいのはAngularJS本体(のはず!
• TypeScriptのsuper setを作るのは難しい!
• TypeScriptの開発速度が早い！
楽をしよう！
25. Type Annotations
http://goo.gl/jKVeHw
var str1: string = "string";
var str2: number = "string"; // エラー！
var str3 = "string"; // 初期化子の型から型推論されstringを指定したのと等価
str3 = 1; // エラー！
!
var b: boolean = true;
var n: number = 1;
!
var a: any = true;
a = 1; // any は何でもOK！
28. Arrow Functions
http://goo.gl/XFyQRB
var hello = (word: string) => console.log("Hello, " + word);
hello("TypeScript");
!
// 返り値の型を明示する
var hello2 = (word: string): void => console.log("Hello, " + word);
// 参考：今まで通りの書き方 1
var hello3 = function (word: string) { console.log("Hello, " + word); };
// 参考：今まで通りの書き方 2
function hello4(word: string) { console.log("Hello, " + word); }
29. internal modules
http://goo.gl/V4ZDRa
module app {
export class Sample {
hello(word = "TypeScript") {
return `Hello, ${word}`;
}
}
}
var obj = new app.Sample();
console.log(obj.hello("AngularJS"));
var app;
(function (app) {
var Sample = (function () {
function Sample() {
}
Sample.prototype.hello = function (word) {
if (word === void 0) { word = "TypeScript"; }
return "Hello, " + word;
};
return Sample;
})();
app.Sample = Sample;
})(app ¦¦ (app = {}));
var obj = new app.Sample();
console.log(obj.hello("AngularJS"));
es6 module 普及したらbad practice
34. tools
• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!
• tslint!
• typedoc!
• dtsm (tsd)!
• LESS!
• unit test!
• mocha!
• power-assert!
• karma!
• protractor!
• その他細々…
35. tools
• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!
• tslint!
• typedoc!
• dtsm (tsd)!
• LESS!
• unit test!
• mocha!
• power-assert!
• karma!
• protractor!
• その他細々…ここだけ！
43. tools
• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!
• tslint!
• typedoc!
• dtsm (tsd)!
• LESS!
• unit test!
• mocha!
• power-assert!
• karma!
• protractor!
• その他細々…
44. TypeScript
• npm install -g typescript!
• npm install grunt-ts —save-dev!
• npm install grunt-typescript —save-dev
どれか1つ！
52. エディタ
• Visual Studio!
• WebStorm!
• IntelliJ IDEA!
• Eclipse!
• Atom!
• Sublime Text!
• Emacs!
• Vim!
• etc, etc…
54. エディタ
• Visual Studio!
• WebStorm!
• IntelliJ IDEA!
• Eclipse!
• Atom!
• Sublime Text!
• Emacs!
• Vim!
• etc, etc…
Win
Mac
Mac WebStorm(IntelliJ IDEA)は
我が道を行ってる…
55. 手順
• ライブラリ本体 える!
• 型定義ファイル える!
• コード書く!
• コンパイルとかする!
• atom-typescript任せも可!
• 動かす！ 実演！
58. 準備
• bower install angular angular-route!
• dtsm install angularjs/angular!
• dtsm install angularjs/angular-route
60. お作法
• tsc —noImplicitAny オプションを使う!
• 常に！常にだ！最初からだ！!
• 型注釈は全力で書け！全力でだ！!
• DIベースだとあんまし推論できない!
• 型ベースのDIいい…(AngularDart?
77. Case C
• 社内共通基盤作成!
• 2014年7月!
• コンサル的に知見共有させていただいた!
• TypeScript 1.1.0-1!
• AngularJS 1.3.1 楽しかった
78. Case D
• の何か!
• 2014年8月ぐらいから…？!
• わかめ抜き案件!
• TypeScript 1.3.0!
• AngularJS 1.2.26 頑張ってるぽい
84. 案：Type base DI
class FooController {
constructor($window: ng.IWindowService) {
}
}
var FooController = (function () {
function FooController($window) {
this.$window = $window;
}
return FooController;
})();
FooController.$inject = [ $window ];
86. 案：Type Check in HTML
• AngularJSコードコンパイル後の型情報!
• routeProviderでの表記!
• HTMLでの記述!
• 静的に突き合わせてチェック可能？？
