Head First TypeScript

TypeScriptの簡単な紹介です

Transcript

1. Head
   Firtst
   TypeScript
   { }
   KAZUMA Ukyo / @yaakaito
   

   View Slide

2. View Slide

3. JavaScript
   

   View Slide

4. JavaScripter <3
   JavaScript
   

   View Slide

5. JavaScripter <3
   JavaScript
   C#
   

   View Slide

6. TypeScript?
   

   View Slide

7. JavaScript
   var f = function(a, b) {
   return a + b;
   }
   

   View Slide

8. TypeScript
   var f = function(a, b) {
   return a + b;
   }
   

   View Slide

9. TypeScript
   var f = function(a, b) {
   return a + b;
   }
   '10' + f(1, 2); // ‘103’
   w o w
   

   View Slide

10. TypeScript is
    Superset
    

    View Slide

11. TypeScript
    var f = function(a : number, b : number) {
    return a + b;
    }
    f(‘1’, 2); // Compile error :)
    

    View Slide

12. but...
    

    View Slide

13. TypeScript
    var f = function(a : number , b : number) {
    return a + b;
    }
    '10' + f(1, 2); // ‘103’ d(^o^)b
    

    View Slide

14. TypeScript
    var f = function(a : number , b : number)
    : number {
    return a + b;
    }
    var a : number = '10'; // Compile error :)
    a + f(1, 2);
    

    View Slide

15. TypeScript
    

    View Slide

16. TypeScript
    

    View Slide

17. Class
    

    View Slide

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';
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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'
    }
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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 !
    

    View Slide

27. Module
    

    View Slide

28. JavaScript
    var Job = {};
    (function(){
    var Programmer = function() {
    //...
    }
    Job.Programmer = Programmer;
    var Director = function() {
    //...
    }
    Job.Director = Director;
    var Manager = function() {
    //...
    }
    Job.Manager = Manager;
    })(Job);
    

    View Slide

29. TypeScript
    module Job{
    ! export class Programmer {
    ! ! //...
    ! }
    !
    ! export class Director {
    ! ! //...
    ! }
    !
    ! export class Manager {
    ! ! //...
    ! }
    }
    

    View Slide

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 !
    

    View Slide

31. Interface
    

    View Slide

32. !== Java / C#
    Programmers can give names to object types;
    TypeScript Language Specification
    

    View Slide

33. TypeScript
    interface Programmer {
    name : string;
    language : string;
    canDeathMarch : () => bool;
    }
    var programmer : Programmer = {
    name : ‘TypeScripter’,
    language : ‘TypeScript’,
    canDeathMarch : function() { return false; }
    }
    

    View Slide

34. Compiled
    var programmer = {
    name: 'TypeScripter',
    language: 'TypeScript',
    canDeathMarch: function () {
    return false;
    }
    };
    

    View Slide

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
    

    View Slide

36. and many more feature...
    

    View Slide

37. but...
    

    View Slide

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'
    }
    });
    });
    

    View Slide

39. Cannot evade JavaScript traps.
    

    View Slide

40. Not solution
    

    View Slide

41. for
    JavaScripter
    

    View Slide