TypeScriptで書くAngularJS @ GDG神戸2014.8.23

2014年8月23日発表分の資料をSlideShareより再掲。
http://www.slideshare.net/armorik83/gdgkobe-angularjs-2

Transcript

1. 5ZQF4DSJQUד剅ֻ
   "OHVMBS+4 "OHVMBS+4⹈䓼⠓
   
   CZ
   (%(牞䨫
   
2. "OHVMBS+4ךְְהֿ׹ ˖ غ؎ٝسָ知⽃
 Ꟛ涪⚥חٌثك٦ءّٝ♳ָ׷
   ˖ 3&45GVM
   "1*⵸䲿ךؿٖ٦يٙ٦ؙ
   ˖ ط؎ذ؍ـ،فٔה麩ְ
 ⦐➂ⵃ欽ךءأذي׾؟ؙ׏ה⡲׸׷ !BSNPSJL
3. 植㖈ך圓䧭 /PEFKT &YQSFTT .POHP%# "OHVMBS+4 Database RESTful API Controller HTML #SPXTFS JSON
4. ְ׻ײ׷.&"/أةحؙ ˖ .
   
   .POHP%#
   ˖ &
   
   &YQSFTT
   ˖ "
   
   "OHVMBS+4
   ˖ /
   
   /PEFKT Ⰻ鿇+BWB4DSJQU
5. Ⰻ鿇+BWB4DSJQU
   ׍׳׏הخٓ؎
6. http://www.typescriptlang.org/
7. ،ٝ؛٦ز 兛媮5ZQF4DSJQU׾
   剅ְג׷הְֲ倯
8. ת׌ך倯 כׄ׭ת׃׳ֲ
9. 5ZQF4DSJQUהכ ˖ BMU+4הְ׻׸׷鎉铂ךמהא
   ˖ .JDSPTPGU爡ָ䎃ַ׵Ꟛ涪
 חWָ⳿׋
   ˖ +BWB4DSJQUך♳⡘✼䳔鎉铂
 㢌䳔䖓ך+4ا٦أ׮铣׫װְׅ
   ˖ ꫼涸㘗➰ֽ
   ˖ $ח䢪׸גְ׋׵Ⰵ׶װְׅ
10. ז׈5ZQF4DSJQU ˖ 傀㶷ך+BWB4DSJQU项欵ծⰋג⢪ִ׷
    ˖ 㢌䳔䖓ך+4ا٦أָ铣׫װְׅ
    ˖ ꫼涸㘗➰ֽBMU+4ד䝢׬ז׵ծֿ׸ָ♧殢ךⵃ挿
    ˖ "OHVMBS+4׾⹛ַׅהـٓؐؠ♳ךرغحؚ ָ㢳涪
    ̔
    㢌䳔䖓ךا٦أ׾铣׬堣⠓ָ㢳ְ
11. ˖ 葿ղ⡲׶㨣׭׷הծ"OHVMBS+4׌ֽד׮
 㣐鋉垷חז׶ָ׍
    ˖ /PEFKT
    .POHP%#׮⢘欽ׅ׷ה
 +40/װ0CKFDUך䪔ְָ걼涪
    ˖ ꫼涸㘗➰ָֽ⸬ֻ ז׈5ZQF4DSJQU
12. ˖ ؙٓأك٦أזؔـآؙؑز䭷ぢ鎉铂
    ˖ Class.prototype.method = function(){…
 ꬗⦜זQSPUPUZQF׾剅ֻ䗳銲כ֮׶תׇ׿
    ˖ ٗآحؙכⱄⵃ欽ך׋׭ؙٓأחתה׭׷
    ˖ 5ZQPכ؝ٝػ؎ָٓⰋ⸂ד䭷䶯
    ˖ ؝ٝػ؎ٕؒٓ٦ָ⳿׋׵וֶַַֿ׃ְ ז׈5ZQF4DSJQU
13. 5ZQF4DSJQU⢪ֲה
    䠬⹛ׅ׷״
14. 5ZQF4DSJQU
    ؟ٝفٕ
    5ZQF4DSJQUⰕ䒭״׶䒷欽
15. 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
16. var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return 'Hello, ' + this.greeting; }; return Greeter; })(); ! var greeter = new Greeter('world'); ! var button = document.createElement('button'); button.textContent = 'Say Hello'; button.onclick = function () { alert(greeter.greet()); }; document.body.appendChild(button); //# sourceMappingURL=greeter.js.map JS
17. 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
18. 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); ̒䒷侧ך㘗 ،ؙإأ⥜귅㶨̓ OFX דㄎל׸׷̓ ֿך鴟כ֮ת׶㢌׻׵זְ ̓،ٗ٦ꟼ侧䒭&4⯓《׶ TS
19. ׉ך➭ך暴䗙 ˖ 㘗䱿锷֮׶תׅ
    ˖ var foo = 'abc';
 var foo: string = 'abc';
    ה剅ַזֻג׮ְְ
    ˖ JOUFSGBDFד㹋鄲ךזְ㘗ך׫ך㹀纏
    ˖ NPEVMFדせ⵸瑞꟦涸ז⢪ְ倯
 ֿֿדְֲNPEVMFכ$PNNPO+4הכ殯ז׷
    ˖ آؑطؙٔأծ竰䪫ծזוזו
20. ˖ ׻ַ׭תׁמ׹孑
 ջ5ZQF4DSJQUٔؿ؋ٖٝأ
 խ7FS㼎䘔ռ
    ˖ 俑岀׌ֽדזֻծꟚ涪橆㞮ך圓眠ַ׵
 佄䴂خ٦ٕ
    HSVOU
    CPXFS
    UTEזוך
 鍑铡׮䲓鯹
    ˖ +BWB4DSJQU㛇燉濼陎׮鯹׏גתׅ ֶׅׅ׭剅硂 !WWBLBNF
21. ַֿֿ׵כ ך鑧
22. 5ZQF4DSJQU׾⢪ֲًٔحز ˖ "OHVMBS+4כ0CKFDUךװ׶ה׶ָ㢳ְ
    ˖ 㘗➰ֽׅ׷ֿהדծ♶僇זفٗػذ؍פך ،ؙإأծ5ZQPծו׿ו׿䭷䶯ׁ׸׷
    ˖ 䒷侧ח㘗׾䭷㹀׃גֶֽלծ铎׏׋㘗׾
 ♷ִג׮؝ٝػ؎ٕؒٓ٦涪欰
    ˖ 孡➰ֻךָ傍ְ
    䝢תזְ
23. ׋׌׃ ˖ ׮ה׮הؙإך֮׷"OHVMBS+4ך鎸岀זך דծ5ZQF4DSJQU㼪Ⰵחכ䊨㣗ָ䗳銲
    ˖ ׉ךֶ鑧׾׃תׅ
24. 
    $POUSPMMFSךⴱ劍⻉
25. <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; }; };
26. <body ng-app> <div ng-controller="sampleCtrl"> <strong>First name:</strong> {{firstName}}<br> </div> </body> HTML JS ! 5ZQF4DSJQUכ♶銲הְֲ倯׮
    ֿך剅ֹ倯כװ׭ת׃׳ֲ
    ֮ה֮הخְٓדׅ
    ̕
    function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; };
27. angular.module('MyAngularJs', [/*...*/]); // Setter ! function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; }; ! angular.module('MyAngularJs') // Getter .controller('SampleCtrl', [ '$scope', // 使用するServiceは全て文字列で表記 SampleCtrl ]); JS BOHVMBSNPEVMF ׾⢪ְת׃׳ֲ
28. angular.module('MyAngularJs', [/*...*/]); // Setter ! function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; }; ! angular.module('MyAngularJs') // Getter .controller('SampleCtrl', [ '$scope', // 使用するServiceは全て文字列で表記 SampleCtrl ]); JS ֿֿ̓׾5ZQF4DSJQUח׃תׅ
29. 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]);
30. // ... 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]); TS ̒׍׳׏ה孡䭯׍䝤ְַ׮׃׸זְ
    խֽוծ"OHVMBS+4ך䒷侧כ㟓ִָ׍
 խזךד何遤׃גֶֻ ̓،ٗ٦ꟼ侧זךדUIJTָ䭷ׅⰻ㺁כ
 խ㢌׻׵זְ@UIJTהַ׃זֻגְְ ̕DMBTT׾㹑鎉׃תׅ DMBTTך؝ٝأزؙٓةָ床׷̓
31. class SampleCtrl { constructor ( public $scope ) { // ... } } ! class SampleCtrl { public $scope; constructor ($scope) { this.$scope = $scope; // ... } } TS ずֿׄה׾
    ׃גתׅ
    ♳ךקֲָءٝفٕ
32. ؝ٝػ؎ٕ ˖ ➙剅ְ׋5ZQF4DSJQU׾؝ٝػ؎ٕׅ׷ה
    ˖ ؒٓ٦
 /sample.ts(1,1): Cannot find name 'angular'. ˖ BOHVMBSהְֲ㢌侧כ搀ְה鎉׻׸תׅ
33. ׉ֿד㘗㹀纏ؿ؋؎ٕ ˖ ➭ך+4ا٦أ荈⵸ח׃׹ծٓ؎ـٓٔח׃׹׾ 欽ְ׷הծ؝ٝػ؎ٓכծוך㢌侧ָ㹑鎉
 幥׫ַⴻ倖דֹתׇ׿
    ˖ 㘗㹀纏ؿ؋؎ٕה⿫撑׾⢪ְծ؝ٝػ؎ٓ ח侄ִתׅ
34. %FOJUFMZ5ZQFE ˖ %FOJUFMZ5ZQFEהְֲ؝ىُصذ؍דכծ
 +4ٓ؎ـٓٔך剣せוֿ׹ח㼎䘔׃׋
 㘗㹀纏ؿ؋؎ٕ׾鞢㺡ח⥂㸚׃גְ׷
 http://definitelytyped.org/ ˖ K2VFSZ
    %KT
    6OEFSTDPSFKT
    +BTNJOF 
 .POHP%#זוזו˘
    ˖ ׮׍׹׿"OHVMBS+4׮֮׷
35. TS /// <reference path="angularjs/angular.d.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]); ̓⿫撑׾㹑鎉ׅ׷ה ̕؝ٝػ؎ָٓ㢌侧BOHVMBS׾钠陎㘗➰ֹד
36. TS declare var angular: any; ! 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]); ̓EFDMBSFהְֲչ،ٝؽؒٝز㹑鎉պ׾欽ְ׷ה
    խ㘗㹀纏ؿ؋؎ָٕ搀ֻג׮؝ٝػ؎ٓח侄ִ׵׸׷
    խ؝ٝػ؎ٕ穠卓חכ䕦갟׃זְ
37. TS declare var angular: any; ! 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]);
38. BOZ㘗 ˖ 5ZQF4DSJQUחכOVNCFS
    TUSJOH
    CPPMFBOה ְֲفٔىذ؍ـ㘗ָ欽䠐ׁ׸גְ׷
    ˖ ׉ך➭ծWPJE
    OVMM
    VOEFOFE㘗׮欽䠐ׁ׸גְ׷ ֿ׸׵ך㘗דך㢌侧㹑鎉כדֹזְ
    ˖ BOZ㘗כ䖞勻ך+BWB4DSJQUך㘗
    ˖ ؝ٝػ؎ٕؒٓ٦׾װ׬׾䖤׆럀׵ׇ׷㜥さװ
 㹀纏ؿ؋؎ٕ׾锃麦דֹזְ㜥さזוח
39. ًاحسך
 ⴓⶴ
40. TS // ... ! class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! // ...
41. TS // ... ! class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! // ... ! ͕͜͜૿͑ͦ͏ͳͷ͸
    ໨ʹݟ͍͑ͯΔʜ
    
42. TS constructor ( public $scope ) { this.init(); ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } ! private init() { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; }
43. TS constructor ( public $scope ) { this.init(); } ! private init() { // ... } ! public getFullName(): string { return this.$scope.firstName + ' ' + this.$scope.lastName; } ̕䨱׶⦼ך㘗
44. ?!
45. غ؎ٝس怩׸ח岣䠐 ˖ TDPQFח秡➰ֽ׵׸גְזְًاحسכ
 ⹛⡲׃תׇ׿ this.$scope.getFullName = () => { return // ... }; 何㢌⵸כ׍ׯ׿הغ؎ٝسׁ׸גְ׋
46. TS constructor ( public $scope ) { this.init(); this.$scope.getFullName = this.getFullName.bind(this); } ! private init() { // ... } ! public getFullName(): string { return this.$scope.firstName + ' ' + this.$scope.lastName; } 姻׃ֻכCJOE ׾⢪ְתׅ
47. ד׮
    CJOE׃זֻגְְ
    倯岀ָ֮׷
48. 剑鵚崧遤׶אא֮׷
    $POUSPMMFS
    BT邌鎸
49. <body ng-app> <div ng-controller="SampleCtrl"> <strong>First name:</strong> {{firstName}}<br> <strong>Last name:</strong> {{lastName}}<br> <strong>Full name:</strong> {{getFullName()}}<br> </div> </body> HTML
50. <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
51. <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 ̕呓秛ׅ׷㢌侧せ ̓㢌侧せفٗػذ؍
    խ
    ➰ֽזְהSPPU4DPQF䪔ְ
52. 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; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', [SampleCtrl]);
53. 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; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', [SampleCtrl]); ̕TDPQF♶銲 ̒TDPQF♶銲 ̒UIJTך湫䱸ךفٗػذ؍ח
    խז׷ךד㘗׾㹀纏
54. $POUSPMMFS
    BT邌鎸כ
    5ZQF4DSJQUה湱䚍ְְָ
55. $POUSPMMFS
    BTךًٔحز ˖ $POUSPMMFS׾طأز׃׋㜥さחծ㢌侧せך
 ֶַ־ד僇然חז׷
    ˖ "OHVMBS+4ך䠐㔳׃זְفٗػذ؍㢌刿׾
 ꣇־׷
    ˖ ׉׃גծ5ZQF4DSJQUךؙٓأה湱䚍ְְָ
56. $POUSPMMFS
    BTךرًٔحز ˖ QSJWBUFזًاحس׮)5.-♳ד䭷㹀ׅ׸ל ⢪ִג׃תֲ
    ˖ 5ZQF4DSJQU؝ٝػ؎ٓכ)5.-ח㼎׃גכ⫴ַזְ
    ˖ )5.-♳ד{{c.$scope.firstName}}הׅ׸ל غ؎ٝسדⵖꣲדֹ׷ָծ׍׳׏הⱔꞿ
    ˖ 5ZQF4DSJQU׾⢪׻זְז׵㉏겗זְ
57. ד׮CJOE ׮
    'BDUPSZװ%JSFDUJWFד⢪ִ׷ךד
    ⚕倯鋙ִגֶֻץ׃
58. 5ZQF4DSJQUד
    ׅ׏ֹ׶剅ֽ׷
59. 
    4FSWJDFךⴱ劍⻉
60. ׉ך⵸ח ˖ 4FSWJDFה'BDUPSZך麩ְ
 椚鍑ׁ׸גְתַׅ
61. 'BDUPSZ angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); 4FSWJDF JS
62. 'BDUPSZ angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); 4FSWJDF JS ̓؎ٝأةٝأ׾欰䧭׃ג鵤ׅ ؝ٝأزؙٓة׾♷ִג"OHVMBS+4ָ欰䧭ׅ׷̓
    4JOHMFUPOדׅխ  խ
63. 'BDUPSZ angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); 4FSWJDF JS 5ZQF4DSJQUד
    䪔ְװְׅךכ4FSWJDF
64. ⢪ְⴓֽ ˖ 4JOHMFUPOַծꟼ侧׾תה׭׋0CKFDUַהְֲ麩ְ
    ˖ 朐䡾⥂㶷כ4FSWJDFח䬐׻ׇ׆SPPU4DPQFחׇׁ׷ץֹ
    ˖ 'BDUPSZכ0CKFDU׾鵤ׅךדծًٝغךⰕꟚך嚊䙀ח
 鵚ְ׉ךꥷכծBOHVMBSCJOE ׅ׷
    ˖ ⢪ְװְׅ倯דְְה䙼׏ג׷
 5ZQF4DSJQUד剅ֻז׵4FSWJDFַ
65. أ٦ػ٦ؙٓأכ ˖ ؙٓأك٦أ001הְִל竰䪫
    ˖ أ٦ػ٦ؙٓأח꧊秈ׇׁג؟ـؙٓأ׾
 ⡲׸לְְךדכ 
 
 ̔؝ٝأزؙٓةחⰋגך1SPWJEFS׾床ׅ"OHVMBS+4
 խה竰䪫כ湱䚍ָ䝤ְךדծְ׹ְ׹鑐遤ꐪ铎⚥
 խNJYJO׾鑐׃גְ׷ָ姻湫ؔأأًדֹזְ
66. 4FSWJDF׾
    5ZQF4DSJQUד剅ְ׋⢽
67. 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); }; } } ! angular.module('MyAngularJs') .service('MyResource', ['$q', '$resource', MyResource]);
68. 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( TS ̕BOHVMBSEUTך㘗㹀纏ؿ؋؎ٕ׾崞欽 ٍ̓ؗأز׃זְה鋵ך㘗ה׃גؒٓ٦׾⳿ׅ ̕ⴽךؿ؋؎ٕד杝荈ח*3FTPVSDF$MBTT׾㹀纏
    խBOHVMBSEUT׾FYUFOET竰䪫ׇׁגְ׷
69. isArray: true} }; return <IResourceClass>this.$resource(baseApi, params, actions); } ! public fetchEntity(id: number): 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); }; } } ! angular.module('MyAngularJs') .service('MyResource', ['$q', '$resource', MyResource]); TS ֿֿתדָⰋג䨱׶⦼ך㘗 ̕杝荈ך㘗 ̓杝荈ך㘗 ̕%*ׅ׷1SPWJEFSה荈魦ך؝ٝأزؙٓة խ䧭⸆儗ה㣟侁儗חㄎל׸׷ꟼ侧
    ̒➙㔐כꟼ⤘זְ
70. ♧孡חװ׶ֺׅ׋
71. 剑䖓ח
    㘗㹀纏ؿ؋؎ٕך鑧
72. آؑطؙٔأ ˖ BOHVMBSEUTװBOHVMBSSFTPVSDFEUTחכ
 החַֻآؑطؙٔأָ⳿גֹתׅ
    ˖ 䫺䫑䠬ָ֮׷ה׍׳׏הꨇ׃ֻ鋅ִ׷ַ׮
73. BOHVMBSEUT余殛 $resource<T>(); ↓ ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス
74. BOHVMBSEUT余殛 ! ݏΜͳ͖ͬͯͨ
    $resource<T>(); ↓ ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス
75. BOHVMBSEUT ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス .then<TResult>( successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any ): IPromise<TResult>
76. BOHVMBSEUT ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス .then<TResult>( successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any ): IPromise<TResult> 殅䠐ׅץֹזךכծֿך鴟כ
    Ⰻ鿇דչמהאך㘗せպד֮׷הְֲֿה
    չ5׾䒷侧חה׶53FTVMU׾鵤ׅꟼ侧պ׾䒷侧הׅ׷
77. דծ穠㽷5חכ
    ⡦Ⰵ׸׋׵ִִי׿
78. BOHVMBSEUT余殛 ng.IPromise<ng.resource.IResourceArray<T>>
 ה5ָطأز׃גְ׋ךדծ(promiseValue: T)ך5כ
    "ng.resource.IResourceArray<T>"Ⰻ⡤׾䭷ׅկ
    ! "ng.resource.IResourceArray<T>"ך⚥ך5כ
    ♧殢剑ⴱծ$resource<T>()ה剅ְ׋儗ך5կIResourceArray<T>כ"1* ַ׵鷏׵׸גֻ׷穠卓ךꂁ⴨ךֿהկ
    ! את׶ծ׉ךꂁ⴨ך⦐ղך㘗׾$resource<T>()ך5ח䭷㹀׃גֶֽ ל.then()ך⚥ד㘗➰ֽׁ׸׋朐䡾ד⢪ִ׷
79. *OUFSGBDF׾⢪ֲ ˖ آؑطؙٔأ׾걼籕ח䪔ֲהծ㘗荈⡤ָ
 䒷侧׾׮אךדⱄⵃ欽ך꬗ד㉏겗דׅ
    ˖ JOUFSGBDF׾㢳欽׃ծ؝٦سⰻח5ָ⳿ג ֿזְ״ֲٓحف׃תׅ
    ˖ *1SPNJTF3FUVSO&OUJUZ
    *%FGFSSFE"DDFQU&OUJUZזוכ
 ׉ְֲ׏׋鑐遤ꐪ铎ך劣ծ欰ת׸ת׃׋
80. 椚鍑ָ帾ת׷ ˖ ⯓➂׋׍ח״׷㘗㹀纏ؿ؋؎ٕכ״ֻדֹ גְ׷
    ˖ 㘗㹀纏׾铣׬הծ%PDVNFOU׾铣׬ח
 瘝׃ְ椚鍑ָ䖤׵׸׷
    ˖ +BWB4DSJQU׌ֽ׾剅ְגְ׋׵ծֿֿתד
 䠐陎׃זְכ׆
81. 㘗ח걾׹ֲ
    5ZQF4DSJQU׾剅ֲֿ
82. ׀幠耮֮׶ָהֲ׀ְׂת׃׋