Download as PDF, PPTX
![// 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](https://image.slidesharecdn.com/ng-japan2015s-150321031230-conversion-gate01/85/ng-japan-2015-TypeScript-AngularJS-1-3-18-320.jpg)
![それを使う
///<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)
;](https://image.slidesharecdn.com/ng-japan2015s-150321031230-conversion-gate01/85/ng-japan-2015-TypeScript-AngularJS-1-3-19-320.jpg)
![案：Type base DI
class FooController {
constructor($window: ng.IWindowService) {
}
}
var FooController = (function () {
function FooController($window) {
this.$window = $window;
}
return FooController;
})();
FooController.$inject = [ $window ];](https://image.slidesharecdn.com/ng-japan2015s-150321031230-conversion-gate01/85/ng-japan-2015-TypeScript-AngularJS-1-3-84-320.jpg)
More Related Content
![[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers](https://cdn.slidesharecdn.com/ss_thumbnails/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
- 1.
- 2.
- 3.
- 4. わかめ まさひろ @vvakame appengine TypeScript AngularJS MasahiroWakame DefinitelyTyped
- 6.
- 7.
- 8. ECMAScript • JavaScriptの元となる仕様のこと! • DOMの仕様とかは入ってない! •最近のブラウザは 5 をサポート! • そろそろ 6 の仕様が確定(今RC2 http://kangax.github.io/compat-table/es5/ https://people.mozilla.org/~jorendorff/es6-draft.html
- 9.
- 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!
- 11.
- 12. TypeScriptの特長 • TypeScriptはJavaScriptを拡張した言語! • 静的型付け！! •ECMAScript 6規格の文法を取り込み中! • 読みやすい変換後JavaScript! • Java, C# とかに優しい言語仕様 from Microsoft
- 13. 静的型付け • 静的解析で多くの整合性検査が可能! • 不整合があったらコンパイルエラー! •var foo: number = “bar”;! • ↑エラー！! • 大規模・大人数 になるほど利点 ! • Java・C# などが有名
- 14.
- 15. 既存資産の活用 • JSのライブラリが使いたい！! • jQuery! •AngularJS! • mocha! • etc…! • TypeScript用に別途型情報を用意する ↑ちょっとめんどい
- 16. DefinitelyTyped definitely/déf(ə)nətli/ →define 副詞more ∼; most∼ 2 明確に, はっきりと〈断る述べる決めるなど〉. type/ta p/ 語源は「打ってできた形型」 (形)typical, (副)typically 名詞複∼s/-s/ 1 C(ある特性を共有する)型, タイプ, 類型; 種類(kind2, sort) ウィズダム英和辞典より I’m committer! definitelytyped.org github.com/borisyankov/DefinitelyTyped
- 17.
- 18. // Type definitionsfor 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' /> ///<referencepath='../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) ;
- 20.
- 21.
- 22. AtScript to TypeScript •TypeScriptに必要な要素が入る! • 作りたいのはAngularJS本体(のはず! • TypeScriptのsuper setを作るのは難しい! • TypeScriptの開発速度が早い！ 楽をしよう！
- 23.
- 24.
- 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！
- 26. Classes http://goo.gl/l3zjBi class Hoge { name:string; constructor(name: string) { this.name = name; } hello(): string { return "Hello, " + this.name; } } ! var obj = new Hoge("world"); window.alert(obj.hello());
- 27. Interfaces http://goo.gl/0WA3zb interface Hoge { str:string; num: number; } ! var obj: Hoge = { str: "string", num: 1 }; ! window.alert(obj.str + obj.num);
- 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
- 30. Generics http://goo.gl/Hh1Aly class Container<T> { constructor(publicdata: T) { } } ! var a = new Container("str"); var b = new Container(1); ! a.data.charAt(0); b.data.toExponential();
- 31.
- 32.
- 33.
- 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! • その他細々…ここだけ！
- 36. node.js • JavaScript実行環境! • この環境で色々なツールを動かす! •https://nodejs.org/! • github.com/hokaccha/nodebrew! • 最近 io.js とかあるけどまぁnode.jsで
- 37. grunt • タスクランナー! • npminstall -g grunt-cli! • 最近 gulp とかあるけどまぁ grunt で! • http://gruntjs.com/
- 38. bower • ライブラリの管理! • AngularJS含む! • grunt 経由で使う! • 最近 npm & browserify とかあるけど
- 39. LESS • cssを生成するaltCSS的な言語! • grunt経由で使う! • 別にcssでもscssでもお好きなのを…! • 生cssはちょっと脳がついていけない
- 40. karma • テストランナー! • grunt経由で使う! • Chrome, Firefox, IE etc… を操れる! • その他! • mocha! • power-assert
- 41. protractor • E2Eテストランナー! • grunt経由で使う! • jasmineにしとくと無難
- 42.
- 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つ！
- 45. tslint • TypeScript用lintツール! • AST(抽象構文木)を検査する! •TypeScript固有の事情も考慮されている jshint, eslintは 僕は使ってません
- 46. typedoc • JSDoc的なヤーツ! • TypeScript専用! •わりといい感じのドキュメントが出る jshint, eslintは 僕は使ってません
- 47.
- 48.
- 49.
- 50.
- 51. dtsm • 型定義ファイルの管理に! • 作者== vvakame! • 実質DefinitelyTypedのダウンローダ! • デファクトはtsdというツール! • オプションが覚えられなかったので 作者→
- 52. エディタ • Visual Studio! •WebStorm! • IntelliJ IDEA! • Eclipse! • Atom! • Sublime Text! • Emacs! • Vim! • etc, etc…
- 53. エディタ • TypeScriptコンパイラ自体がIDE用API 持ってる! • LanguageServiceと呼ばれる! •VisualStudio同等の機能が実装しやすい! • お好きなエディタで書きましょう
- 54. エディタ • Visual Studio! •WebStorm! • IntelliJ IDEA! • Eclipse! • Atom! • Sublime Text! • Emacs! • Vim! • etc, etc… Win Mac Mac WebStorm(IntelliJ IDEA)は 我が道を行ってる…
- 55. 手順 • ライブラリ本体 える! •型定義ファイル える! • コード書く! • コンパイルとかする! • atom-typescript任せも可! • 動かす！ 実演！
- 56. With AngularJS 1.3 sample:http://goo.gl/x6gG7Z
- 57. 簡単なことさ • TypeScriptは特別じゃない! • ただのJavaScriptの延長線上にある! •JS上のBest Practiceはそのまま通用する! • TypeScriptで+αがあるかな！ https://github.com/johnpapa/angular-styleguide https://github.com/angular/angular.js/wiki/Best-Practices
- 58. 準備 • bower installangular angular-route! • dtsm install angularjs/angular! • dtsm install angularjs/angular-route
- 59. 基礎知識 • 型の名前を覚えよう！見つけよう！! • 適当にファイル内検索すればOK! •使いたいメソッド名! • $apply, $on, $watch etc…! • 使いたいDIオブジェクト名! • $routeProvider, $filter, $compile etc…
- 60. お作法 • tsc —noImplicitAnyオプションを使う! • 常に！常にだ！最初からだ！! • 型注釈は全力で書け！全力でだ！! • DIベースだとあんまし推論できない! • 型ベースのDIいい…(AngularDart?
- 61. プロジェクト構成 • 外部モジュールは使わない! • es6module が来たら考えよう！! • 今は最終的にconcatだ！！! • コンパイルの始点を決める! • どのファイルからでもコンパイルでき るようにしようとすると死ぬ
- 62. 出力順制御問題 • 細かいJSファイルたくさん！! • →結合順序で苦労する! •TypeScriptコード内部に書くのが楽…! • 循環参照問題! • コンパイルの始点によって結果変わる! • モジュール定義とモジュール利用が 逆になったりするとエラー
- 63.
- 64.
- 65. protractor • 型定義ファイル干渉問題! • angular.d.ts,protractor.d.ts同時使用不可! • $ の定義がぶつかる! • 全てが丸く収まる解決策なし！! • e2eテストコードと本番コードを混ぜない! • ↑これが全て…守れないなら泥まみれ
- 66.
- 67.
- 68.
- 69. —target es6 は？ 使わない es6module syntax 入ってから考えよう！
- 70. babel は？ 使わない es6 modulesyntax 入ってから考えよう！
- 71.
- 72. SourceMap • 変換前と変換後ソースをマッピング! • よーするにTypeScriptのままデバッグ! •validationの仕様が入ってない！! • 変換途中でぶっ壊れてもわからん！! • クソが！! • 多段変換のどこで壊れたかわからん！ 今からでも壊れ検出機能ブラウザに入れてくれ
- 73.
- 74.
- 75. Case A • オンライン学習システム! •2013年1月頃! • ほぼ出たてだけど実践投入! • TypeScript 0.8.2! • AngularJS 1.0.3 Dartは怖かった…
- 76. Case B • 社内チケット管理システム! •2014年1月頃! • 途中CoffeeScriptから移行! • TypeScript 0.9.7! • AngularJS 1.2.13 型がないと 改修が怖かった
- 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 頑張ってるぽい
- 79.
- 80.
- 81. LanguageService • TypeScriptコンパイラのAPIが露出! • AST(抽象構文木)とか取れる! •入力補完候補も取れる! • フォーマッタも使える! • 割りといろいろできる! • unstable！
- 82.
- 83.
- 84. 案：Type base DI classFooController { constructor($window: ng.IWindowService) { } } var FooController = (function () { function FooController($window) { this.$window = $window; } return FooController; })(); FooController.$inject = [ $window ];
- 85. 案：実行時型検査 • コード→AST→ごにょる→コード生成! • 開発・テスト時には実行時型検査ON! •リリース時にはOFFにする! • JSONの型チェックしたいよね…
- 86. 案：Type Check inHTML • AngularJSコードコンパイル後の型情報! • routeProviderでの表記! • HTMLでの記述! • 静的に突き合わせてチェック可能？？
- 87.