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