TypeScriptをより実践的に使うために

Build Insider Offline #2 ( http://www.buildinsider.net/event/offline/02 )

Transcript

1. View Slide

2. ( )
   

   View Slide

3. View Slide

4. TypeScript
   TypeScript
   TypeScript
   TypeScript ? ?
   TypeScript
   TypeScript
   

   View Slide

5. View Slide

6. TypeScript Ver.1.0
   

   View Slide

7. JavaScript
   

   View Slide

8. View Slide

9. ( )
   

   View Slide

10. View Slide

11. View Slide

12. Module( )
    Class/Interface
    Arrow Function
    

    View Slide

13. IDE ( )
    

    View Slide

14. View Slide

15. IDE
    DOM
    

    View Slide

16. JavaScript
    HTML
    

    View Slide

17. JavaScript
    Visual Studio IDE
    JavaScript
    

    View Slide

18. IDE
    

    View Slide

19. View Slide

20. Node.js
    WebStorm
    Visual Studio
    Playground
    Visual Studio Online
    

    View Slide

21. View Slide

22. % npm install -g typescript
    % tsc nantoka.ts
    

    View Slide

23. View Slide

24. JetBrains Web
    HTML CSS JavaScript TypeScript
    TypeScript/JavaScript
    TypeScript Node.js
    

    View Slide

25. View Slide

26. Microsoft
    2013 Update 2
    (Visual Studio Express) TypeScript
    

    View Slide

27. View Slide

28. Visual Studio
    TypeScript
    

    View Slide

29. View Slide

30. JetBrains Visual Studio
    ( )
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. Microsoft Azure Web Sites
    Node.js+TypeScript
    

    View Slide

36. View Slide

37. View Slide

38. Web WebStorm+Node.js
    Windows Visual Studio
    Playground Visual Studio Online
    

    View Slide

39. View Slide

40. (.d.ts)
    DefinitelyTyped
    Visual Studio DefinitelyTyped
    Node.js DefinitelyTyped
    (.d.ts)
    

    View Slide

41. JavaScript
    

    View Slide

42. GitHub (.d.ts)
    https://github.com/borisyankov/DefinitelyTyped
    

    View Slide

43. View Slide

44. View Slide

45. tsd
    % npm install -g tsd
    % tsd query knockout
    

    View Slide

46. View Slide

47. JavaScript TypeScript
    TypeScript
    

    View Slide

48. TypeScript
    declare
    

    View Slide

49. declare var hoge: number; // JavaScript hoge
    declare class Hoge {
    foo(): void;
    }
    

    View Slide

50. // Rabbit
    function Rabbit(name) {
    this.name = name;
    }
    // jump
    Rabbit.prototype.jump = function () {
    alert(this.name + ' ');
    }
    // Rabbit Tippy
    var Tippy = new Rabbit(' ');
    

    View Slide

51. any
    declare var Tippy: any;
    

    View Slide

52. declare var Tippy: any;
    declare class Rabbit {
    constructor(name: string); //
    name: string; //
    jump(): void; //
    }
    

    View Slide

53. any
    declare var Tippy: Rabbit;
    declare class Rabbit {
    constructor(name: string); //
    name: string; //
    jump(): void; //
    }
    

    View Slide

54. JS ?
    var HotCocoa = {
    name: ' ',
    price: 400
    };
    var KilimanjaroCoffee = {
    name: ' ',
    price: 600
    };
    

    View Slide

55. new interface
    interface IDrinkStatic {
    name: string;
    price: number;
    }
    declare var HotCocoa: IDrinkStatic;
    declare var KilimanjaroCoffee: IDrinkStatic;
    

    View Slide

56. View Slide

57. any
    any
    

    View Slide

58. View Slide

59. View Slide

60. TypeScript
    TypeScript JavaScript
    tsc
    

    View Slide

61. View Slide

62. TypeScript
    

    View Slide

63. View Slide