ng-japan 2015 typescript+angularjs 1.3
TRANSCRIPT
![Page 1: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/1.jpg)
AtScriptの近況と将来
わかめ まさひろ
ng-japan
![Page 2: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/2.jpg)
AtScriptの近況と将来
わかめ まさひろ
ng-japan!?
![Page 3: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/3.jpg)
TypeScriptとAngularJS 1.3
わかめ まさひろAtScriptの近況
と将来
![Page 4: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/4.jpg)
わかめ まさひろ @v vakame
appengine
TypeScript
AngularJS
Masahiro Wakame
DefinitelyTyped
![Page 5: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/5.jpg)
![Page 6: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/6.jpg)
変更行数が多いのは
tsc本体を入れてた時期があったせい
![Page 7: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/7.jpg)
ECMAScript?
ESと略す場合が多い
![Page 8: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/8.jpg)
ECMAScript
• JavaScriptの元となる仕様のこと!
• DOMの仕様とかは入ってない!
• 最近のブラウザは 5 をサポート!
• そろそろ 6 の仕様が確定(今RC2
http://kangax.github.io/compat-table/es5/https://people.mozilla.org/~jorendorff/es6-draft.html
![Page 9: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/9.jpg)
AtScript?
![Page 10: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/10.jpg)
AtScript
• AtScript == ES6+A!
• A == Annotations (Decorators)!
• AnnotationsはES6に含まれない!
• Super set of TypeScript!
• type annotations
http://goo.gl/5z43FEhttp://goo.gl/Rs5rea from AngularJS team!
![Page 11: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/11.jpg)
TypeScript?
![Page 12: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/12.jpg)
TypeScriptの特長• TypeScriptはJavaScriptを拡張した言語!
• 静的型付け!!
• ECMAScript 6規格の文法を取り込み中!
• 読みやすい変換後JavaScript!
• Java, C# とかに優しい言語仕様
from Microsoft
![Page 13: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/13.jpg)
静的型付け• 静的解析で多くの整合性検査が可能!
• 不整合があったらコンパイルエラー!
• var foo: number = “bar”;!
• ↑エラー!!
• 大規模・大人数 になるほど利点⤴!
• Java・C# などが有名
![Page 15: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/15.jpg)
既存資産の活用
• JSのライブラリが使いたい!!
• jQuery!• AngularJS!• mocha!• etc…!
• TypeScript用に別途型情報を用意する
↑ちょっとめんどい
![Page 16: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/16.jpg)
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.orggithub.com/borisyankov/DefinitelyTyped
![Page 17: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/17.jpg)
型定義ファイル .d.ts
Over 1000!
![Page 18: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/18.jpg)
// 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 injectioninterface Function { $inject?: string[];} // Collapse angular into ngimport ng = angular;// Support AMD requiredeclare 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 { strictDi?: boolean;
既存JSに型を後付けする
http://goo.gl/xbjtzy
![Page 19: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/19.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) ;
![Page 20: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/20.jpg)
2015/03/05
![Page 22: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/22.jpg)
AtScript to TypeScript
• TypeScriptに必要な要素が入る!
• 作りたいのはAngularJS本体(のはず!
• TypeScriptのsuper setを作るのは難しい!
• TypeScriptの開発速度が早い!楽をしよう!
![Page 23: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/23.jpg)
まとめ
• いまからTypeScriptやっとくか!
![Page 24: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/24.jpg)
TypeScript syntax
赤字部分=TypeScript固有
ES6部分の多さに注目
![Page 25: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/25.jpg)
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!
![Page 26: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/26.jpg)
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());
![Page 27: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/27.jpg)
Interfaces
http://goo.gl/0WA3zb
interface Hoge { str: string; num: number; } !var obj: Hoge = { str: "string", num: 1 }; !window.alert(obj.str + obj.num);
![Page 28: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/28.jpg)
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); }
![Page 29: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/29.jpg)
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
![Page 30: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/30.jpg)
Generics
http://goo.gl/Hh1Aly
class Container<T> { constructor(public data: T) { } } !var a = new Container("str"); var b = new Container(1); !a.data.charAt(0); b.data.toExponential();
![Page 31: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/31.jpg)
続きはWebで!http://goo.gl/mcF92t
http://goo.gl/Htqn5E
書籍もよろしく!http://goo.gl/QiXe8t
![Page 33: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/33.jpg)
お断り
流行より わかりやすくて
動くもの
![Page 34: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/34.jpg)
tools• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!• tslint!• typedoc!• dtsm (tsd)!
• LESS!
• unit test!
• mocha!
• power-assert!
• karma!
• protractor!
• その他細々…
![Page 35: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/35.jpg)
tools• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!• tslint!• typedoc!• dtsm (tsd)!
• LESS!
• unit test!
• mocha!
• power-assert!
• karma!
• protractor!
• その他細々…ここだけ!
![Page 36: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/36.jpg)
node.js
• JavaScript実行環境!
• この環境で色々なツールを動かす!
• https://nodejs.org/!
• github.com/hokaccha/nodebrew!
• 最近 io.js とかあるけどまぁnode.jsで
![Page 37: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/37.jpg)
grunt
• タスクランナー!
• npm install -g grunt-cli!
• 最近 gulp とかあるけどまぁ grunt で!
• http://gruntjs.com/
![Page 38: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/38.jpg)
bower
• ライブラリの管理!
• AngularJS 含む!
• grunt 経由で使う!
• 最近 npm & browserify とかあるけど
![Page 39: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/39.jpg)
LESS
• cssを生成するaltCSS的な言語!
• grunt 経由で使う!
• 別にcssでもscssでもお好きなのを…!
• 生cssはちょっと脳がついていけない
![Page 40: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/40.jpg)
karma• テストランナー!
• grunt 経由で使う!
• Chrome, Firefox, IE etc… を操れる!
• その他!
• mocha!
• power-assert
![Page 41: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/41.jpg)
protractor
• E2Eテストランナー!
• grunt 経由で使う!
• jasmineにしとくと無難
![Page 42: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/42.jpg)
with TypeScript
![Page 43: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/43.jpg)
tools• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!• tslint!• typedoc!• dtsm (tsd)!
• LESS!
• unit test!
• mocha!
• power-assert!
• karma!
• protractor!
• その他細々…
![Page 44: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/44.jpg)
TypeScript
• npm install -g typescript!
• npm install grunt-ts —save-dev!
• npm install grunt-typescript —save-dev
どれか1つ!
![Page 45: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/45.jpg)
tslint
• TypeScript用lintツール!
• AST(抽象構文木)を検査する!
• TypeScript固有の事情も考慮されているjshint, eslintは 僕は使ってません
![Page 46: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/46.jpg)
typedoc
• JSDoc的なヤーツ!
• TypeScript専用!
• わりといい感じのドキュメントが出るjshint, eslintは 僕は使ってません
![Page 47: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/47.jpg)
grunt-typedoc
too old!!
![Page 48: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/48.jpg)
grunt-typedoc
![Page 49: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/49.jpg)
grunt-typedoc
!?
![Page 50: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/50.jpg)
grunt-typedoc
今度直しときます…
![Page 51: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/51.jpg)
dtsm
• 型定義ファイルの管理に!
• 作者 == vvakame!
• 実質DefinitelyTypedのダウンローダ!
• デファクトはtsdというツール!
• オプションが覚えられなかったので作者→
![Page 52: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/52.jpg)
エディタ• Visual Studio!
• WebStorm!
• IntelliJ IDEA!
• Eclipse!
• Atom!
• Sublime Text!
• Emacs!
• Vim!
• etc, etc…
![Page 53: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/53.jpg)
エディタ
• TypeScriptコンパイラ自体がIDE用API持ってる!
• LanguageServiceと呼ばれる!
• VisualStudio同等の機能が実装しやすい!
• お好きなエディタで書きましょう
![Page 54: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/54.jpg)
エディタ• Visual Studio!
• WebStorm!
• IntelliJ IDEA!
• Eclipse!
• Atom!
• Sublime Text!
• Emacs!
• Vim!
• etc, etc…
Win
Mac
Mac WebStorm(IntelliJ IDEA)は 我が道を行ってる…
![Page 55: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/55.jpg)
手順• ライブラリ本体揃える!
• 型定義ファイル揃える!
• コード書く!
• コンパイルとかする!
• atom-typescript任せも可!
• 動かす! 実演!
![Page 57: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/57.jpg)
簡単なことさ• TypeScriptは特別じゃない!
• ただのJavaScriptの延長線上にある!
• JS上のBest Practiceはそのまま通用する!
• TypeScriptで+αがあるかな!
https://github.com/johnpapa/angular-styleguidehttps://github.com/angular/angular.js/wiki/Best-Practices
![Page 58: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/58.jpg)
準備
• bower install angular angular-route!
• dtsm install angularjs/angular!
• dtsm install angularjs/angular-route
![Page 59: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/59.jpg)
基礎知識• 型の名前を覚えよう!見つけよう!!
• 適当にファイル内検索すればOK!
• 使いたいメソッド名!
• $apply, $on, $watch etc…!
• 使いたいDIオブジェクト名!
• $routeProvider, $filter, $compile etc…
![Page 60: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/60.jpg)
お作法• tsc —noImplicitAny オプションを使う!
• 常に!常にだ!最初からだ!!
• 型注釈は全力で書け!全力でだ!!
• DIベースだとあんまし推論できない!
• 型ベースのDIいい…(AngularDart?
![Page 61: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/61.jpg)
プロジェクト構成• 外部モジュールは使わない!
• es6 module が来たら考えよう!!
• 今は最終的にconcatだ!!!
• コンパイルの始点を決める!
• どのファイルからでもコンパイルできるようにしようとすると死ぬ
![Page 62: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/62.jpg)
出力順制御問題• 細かいJSファイルたくさん!!
• →結合順序で苦労する!
• TypeScriptコード内部に書くのが楽…!
• 循環参照問題!• コンパイルの始点によって結果変わる!
• モジュール定義とモジュール利用が逆になったりするとエラー
![Page 63: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/63.jpg)
プロジェクト構成index.ts
angular.d.tsfoo/index.ts
foo/module.ts
foo/aController.ts
foo/bService.ts
←常にここコンパイル =毎回同じ結果
![Page 64: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/64.jpg)
プロジェクトサンプル
README読んでね! Windowsは…動くのか?
![Page 65: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/65.jpg)
protractor• 型定義ファイル干渉問題!
• angular.d.ts, protractor.d.ts同時使用不可!
• $ の定義がぶつかる!• 全てが丸く収まる解決策なし!!
• e2eテストコードと本番コードを混ぜない!
• ↑これが全て…守れないなら泥まみれ
![Page 66: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/66.jpg)
TypeScript Q&A
3ヶ月後には 全然違うこといってるかも
![Page 67: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/67.jpg)
browserify使わないの?
使わないまだbowerでよくね…? 僕は次の案件があったら
たぶん使うけど…
![Page 68: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/68.jpg)
amd(require.js)使わないの
使わない生成コードの制御が 地味にめんどい
細かい罠がちょいちょい…
具体的には値として使ってないとコードが消される
![Page 69: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/69.jpg)
—target es6 は?
使わないes6 module syntax 入ってから考えよう!
![Page 70: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/70.jpg)
babel は?
使わないes6 module syntax 入ってから考えよう!
![Page 71: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/71.jpg)
SourceMapは?
使わないほうが…
SourceMapには 魔物が住むと聞く…
![Page 72: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/72.jpg)
SourceMap• 変換前と変換後ソースをマッピング!
• よーするにTypeScriptのままデバッグ!
• validationの仕様が入ってない!!
• 変換途中でぶっ壊れてもわからん!!
• クソが!!
• 多段変換のどこで壊れたかわからん!今からでも壊れ検出機能ブラウザに入れてくれ
![Page 73: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/73.jpg)
TypeScript専用ライブラリ
使ってないそもそも存在してる?
$resource, ui-router 便利!
![Page 74: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/74.jpg)
実践投入
![Page 75: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/75.jpg)
Case A
• オンライン学習システム!
• 2013年1月頃!
• ほぼ出たてだけど実践投入!
• TypeScript 0.8.2!
• AngularJS 1.0.3 Dartは怖かった…
![Page 76: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/76.jpg)
Case B
• 社内チケット管理システム!
• 2014年1月頃!
• 途中CoffeeScriptから移行!
• TypeScript 0.9.7!
• AngularJS 1.2.13型がないと
改修が怖かった
![Page 77: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/77.jpg)
Case C
• 社内共通基盤作成!
• 2014年7月!
• コンサル的に知見共有させていただいた!
• TypeScript 1.1.0-1!
• AngularJS 1.3.1 楽しかった
![Page 78: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/78.jpg)
Case D
• 謎の何か!
• 2014年8月ぐらいから…?!
• わかめ抜き案件!
• TypeScript 1.3.0!
• AngularJS 1.2.26 頑張ってるぽい
![Page 79: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/79.jpg)
TypeScript+AngularJS 1.3 イケますよ!
優れたプロジェクト テンプレートは必要そう
![Page 80: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/80.jpg)
TypeScript API
![Page 81: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/81.jpg)
LanguageService• TypeScriptコンパイラのAPIが露出!
• AST(抽象構文木)とか取れる!
• 入力補完候補も取れる!
• フォーマッタも使える!
• 割りといろいろできる!
• unstable!
![Page 82: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/82.jpg)
機能切り出し+α
![Page 83: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/83.jpg)
AST解析+警告出力
![Page 84: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/84.jpg)
案:Type base DIclass FooController { constructor($window: ng.IWindowService) { } }
var FooController = (function () { function FooController($window) { this.$window = $window; } return FooController; })(); FooController.$inject = [“$window”];
![Page 85: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/85.jpg)
案:実行時型検査
• コード→AST→ごにょる→コード生成!
• 開発・テスト時には実行時型検査ON!
• リリース時にはOFFにする!
• JSONの型チェックしたいよね…
![Page 86: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/86.jpg)
案:Type Check in HTML
• AngularJSコードコンパイル後の型情報!
• routeProviderでの表記!
• HTMLでの記述!
• 静的に突き合わせてチェック可能??
![Page 87: ng-japan 2015 TypeScript+AngularJS 1.3](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a523a81a28ab63018b4579/html5/thumbnails/87.jpg)
Q&A
any questions?