Head First TypeScript

TypeScriptの簡単な紹介です

Transcript

1. Head Firtst TypeScript { } KAZUMA Ukyo / @yaakaito
3. JavaScript
4. JavaScripter <3 JavaScript
5. JavaScripter <3 JavaScript C#
6. TypeScript?
7. JavaScript var f = function(a, b) { return a + b; }
8. TypeScript var f = function(a, b) { return a + b; }
9. TypeScript var f = function(a, b) { return a + b; } '10' + f(1, 2); // ‘103’ w o w
10. TypeScript is Superset
11. TypeScript var f = function(a : number, b : number) { return a + b; } f(‘1’, 2); // Compile error :)
12. but...
13. TypeScript var f = function(a : number , b : number) { return a + b; } '10' + f(1, 2); // ‘103’ d(^o^)b
14. TypeScript var f = function(a : number , b : number) : number { return a + b; } var a : number = '10'; // Compile error :) a + f(1, 2);
15. TypeScript
16. TypeScript
17. Class
18. JavaScript function Programmer(name, language) { this.name = name || 'JavaScripter'; this.language = language || 'JavaScript' } var P = Programmer; P.prototype.deathMarching = function() { return this.language === 'JavaScript'; }
19. JavaScript function Programmer(name, language) { this.name = name || 'JavaScripter'; this.language = language || 'JavaScript' } var P = Programmer; P.prototype.deathMarching = function() { return this.language === 'JavaScript'; } } properties
20. JavaScript function Programmer(name, language) { this.name = name || 'JavaScripter'; this.language = language || 'JavaScript' } var P = Programmer; P.prototype.deathMarching = function() { return this.language === 'JavaScript'; } } construcor
21. JavaScript function Programmer(name, language) { this.name = name || 'JavaScripter'; this.language = language || 'JavaScript' } var P = Programmer; P.prototype.deathMarching = function() { return this.language === 'JavaScript'; } } methods
22. TypeScript class Programmer { name : string = 'TypeScripter'; language : string = 'TypeScript'; constructor(name? : string, language? : string) { if (name) { this.name = name; } if (language) { this.language = language; } } isDeathMarching() : bool { return this.language === 'JavaScript' } }
23. TypeScript class Programmer { name : string = 'TypeScripter'; language : string = 'TypeScript'; constructor(name? : string, language? : string) { if (name) { this.name = name; } if (language) { this.language = language; } } isDeathMarching() : bool { return this.language === 'JavaScript' } } } properties
24. TypeScript class Programmer { name : string = 'TypeScripter'; language : string = 'TypeScript'; constructor(name? : string, language? : string) { if (name) { this.name = name; } if (language) { this.language = language; } } isDeathMarching() : bool { return this.language === 'JavaScript' } } } construcor
25. TypeScript class Programmer { name : string = 'TypeScripter'; language : string = 'TypeScript'; constructor(name? : string, language? : string) { if (name) { this.name = name; } if (language) { this.language = language; } } isDeathMarching() : bool { return this.language === 'JavaScript' } } } methods
26. Compiled var Programmer = (function () { function Programmer(name, language) { this.name = 'TypeScripter'; this.language = 'TypeScript'; if(name) { this.name = name; } if(language) { this.language = language; } } Programmer.prototype.isDeathMarching = function () { return this.language === 'JavaScript'; }; return Programmer; })(); so cute !
27. Module
28. JavaScript var Job = {}; (function(){ var Programmer = function() { //... } Job.Programmer = Programmer; var Director = function() { //... } Job.Director = Director; var Manager = function() { //... } Job.Manager = Manager; })(Job);
29. TypeScript module Job{ ! export class Programmer { ! ! //... ! } ! ! export class Director { ! ! //... ! } ! ! export class Manager { ! ! //... ! } }
30. Compiled var Job; (function (Job) { var Programmer = (function () { function Programmer() { } return Programmer; })(); Job.Programmer = Programmer; var Director = (function () { function Director() { } return Director; })(); Job.Director = Director; var Manager = (function () { function Manager() { } return Manager; })(); Job.Manager = Manager; })(Job || (Job = {})); so cute !
31. Interface
32. !== Java / C# Programmers can give names to object types; TypeScript Language Specification
33. TypeScript interface Programmer { name : string; language : string; canDeathMarch : () => bool; } var programmer : Programmer = { name : ‘TypeScripter’, language : ‘TypeScript’, canDeathMarch : function() { return false; } }
34. Compiled var programmer = { name: 'TypeScripter', language: 'TypeScript', canDeathMarch: function () { return false; } };
35. TypeScript interface IDeathMarch { () : void; (programmer:Programmer) : void; (days:number) : void; (spec:Spec) : void; } var deathMarch : IDeathMarch = function(arg) { if (arg instanceof Programmer){ /* ... */ } if (arg instanceof Spec){ /* ... */ } // ... } deathMarch();// :( deathMarch(new Programmer(‘TypeScripter’));// X( deathMarch(-5);// orz deathMarch(new Spec(‘New Solution’));// f*ck
36. and many more feature...
37. but...
38. JavaScript module( ‘Job’, function(export){ export.Programmer = class( ‘Programmer’, { name : ‘TypeScripter’, language : ‘TypeScript’ constructor: function(name, language) if (name) { this.name = name; } if (language) { this.language = language; } }, isDeathMarching() { return this.language === 'JavaScript' } }); });
39. Cannot evade JavaScript traps.
40. Not solution
41. for JavaScripter