TypeScript, future and past

Modern Web Conference 2015

Transcript

1. TypeScript

   future and past
   othree @ modern web conf
   

   View Slide

2. Notice
   Codes in this slide might be invalid
   

   View Slide

3. Notice
   Codes in this slide might be invalid
   Even in the future
   

   View Slide

4. Type
   • JavaScript is dynamic type
   • No type check at compile time and run time
   

   View Slide

5. var hey
   hey = 1
   hey = 'this is string'
   hey = false
   

   View Slide

6. int hey
   hey = 1
   hey = 'this is string' // Error
   hey = false // Error
   

   View Slide

7. Pros
   • Compiler optimization
   • Reliability for large scale app
   • IDE support
   http://stackoverflow.com/questions/125367/dynamic-type-languages-versus-static-type-languages
   

   View Slide

8. 麕⿡
   

   View Slide

9. ECMAScript 4
   • Lots of new features
   • Type annotation
   • Static type check
   http://www.ecmascript.org/es4/spec/overview.pdf
   

   View Slide

10. var hey:number
    hey = 1
    hey = 'this is string’ // TypeError
    hey = false // TypeError
    

    View Slide

11. var ho = {
    id: 123,
    desc: "hoho"
    } : {
    id: int,
    desc: string
    }
    

    View Slide

12. type Tuple = {
    id: int,
    desc: string
    }
    var ho = {
    id: 123,
    desc: "hoho"
    } : Tuple
    

    View Slide

13. ECMAScript 4
    • Deprecated to be ECMAScript standard
    • Live in ActionScript 3
    • Flash, Flex
    

    View Slide

14. 植㖈
    

    View Slide

15. • Type in compile to JavaScript languages
    

    View Slide

16. View Slide

17. TypeScript
    • Microsoft, 2012
    • Add type and several features to JavaScript(ES5)
    • JavaScript Superset
    

    View Slide

18. TypeScript
    Type Class
    Generics Module
    

    View Slide

19. Type
    • Optional type annotation
    • Compile time type check
    • Type definition file
    

    View Slide

20. var hey:number
    hey = 1
    hey = 'this is string’ // Error
    hey = false // Error
    

    View Slide

21. var hey:number
    hey = 1
    hey = 'this is string’ // Compile Error
    hey = false // Compile Error
    

    View Slide

22. var hey
    hey = 1
    

    View Slide

23. interface Tuple {
    id: number;
    desc: string;
    }
    var ho:Tuple = {
    id: 123,
    desc: "hoho"
    }
    

    View Slide

24. Definition File
    • Like C++ header file
    • Define library interface
    • File extension: .d.ts
    • Work with Visual Studio, TernJS
    

    View Slide

25. View Slide

26. 700+ libs
    

    View Slide

27. View Slide

28. Projects
    • AngularJS 2
    • Asana
    • Immutable.js
    • Shumway by Mozilla
    

    View Slide

29. TypeScript 1.5+
    • Align to ECMAScript 6
    • Use native module and class
    • More ECMAScript 6 features
    http://blogs.msdn.com/b/typescript/archive/2014/10/22/typescript-and-the-road-to-2-0.aspx
    

    View Slide

30. http://goo.gl/pwk6Pb
    

    View Slide

31. http://goo.gl/pwk6Pb
    

    View Slide

32. Angular Team
    not Satisfy
    

    View Slide

33. AtScript
    • Google Angular Team, 2014
    • Annotation, Introspection
    • At means @
    

    View Slide

34. http://atscript.org
    

    View Slide

35. http://goo.gl/pwk6Pb
    

    View Slide

36. http://goo.gl/pwk6Pb
    

    View Slide

37. Annotation
    • 垦鏽
    • Store meta data
    • Accessible in runtime
    • Like Java annotation
    

    View Slide

38. @Memorize
    function fib(n) {
    if (n < 2) { return n }
    return fib(n - 1) + fib(n - 2)
    }
    

    View Slide

39. function fib(n) {
    if (n < 2) { return n }
    return fib(n - 1) + fib(n - 2)
    }
    fib.annotations = [
    new Memorize()
    ]
    

    View Slide

40. Runtime Readable
    • Use `new` to create a new instance
    • Store under `annotations`
    

    View Slide

41. Introspection
    • Ⰹ溁
    • Runtime type check
    

    View Slide

42. Runtime Type Check
    • No magic
    • Add code to check type
    • Use assert.js
    

    View Slide

43. View Slide

44. function fib(n:number):number {
    if (n < 2) { return n }
    return fib(n - 1) + fib(n - 2)
    }
    

    View Slide

45. function fib(n) {
    assert.argumentTypes(n, number)
    if (n < 2) {
    return assert.returnType((n), number)
    }
    return assert.returnType(
    (fib(n - 1) + fib(n - 2)), number
    )
    }
    

    View Slide

46. function fib(n) {
    assert.argumentTypes(n, number)
    if (n < 2) {
    return assert.returnType((n), number)
    }
    return assert.returnType(
    (fib(n - 1) + fib(n - 2)), number
    )
    }
    

    View Slide

47. function fib(n) {
    assert.argumentTypes(n, number)
    if (n < 2) {
    return assert.returnType((n), number)
    }
    return assert.returnType(
    (fib(n - 1) + fib(n - 2)), number
    )
    }
    

    View Slide

48. function fib(n) {
    assert.argumentTypes(n, number);
    if (n < 2) {
    return assert.returnType((n), number);
    }
    return assert.returnType(
    (fib(n - 1) + fib(n - 2)), number
    );
    }
    

    View Slide

49. Performance Impact
    • Yes, of course
    • Only run type check at development time
    • Compile to no type check version for production
    

    View Slide

50. AtScript Compiler
    • Use traceur with options
    

    View Slide

51. AtScript Playground
    • Traceur environment ready for play
    https://github.com/angular/atscript-playground
    

    View Slide

52. https://github.com/angular/atscript-playground/blob/master/config.json
    {
    "traceur": {
    "modules": "amd",
    "script": false,
    "types": true,
    "typeAssertions": true,
    "typeAssertionModule": "assert",
    "annotations": true,
    "sourceMaps": "file"
    }
    }
    

    View Slide

53. {
    "traceur": {
    "modules": "amd",
    "script": false,
    "types": true,
    "typeAssertions": true,
    "typeAssertionModule": "assert",
    "annotations": true,
    "sourceMaps": "file"
    }
    }
    https://github.com/angular/atscript-playground/blob/master/config.json
    

    View Slide

54. Facebook want
    Their Own Solution
    

    View Slide

55. Flow
    • Facebook’s static type checker
    • Compatible with TypeScript’s syntax
    • Several difference
    

    View Slide

56. View Slide

57. Difference
    • Doesn’t compile ES6 to ES5
    • Scalability, flow analysis
    • More types, ex: maybe, non-nullable
    • Integrated with JSX
    http://www.2ality.com/2014/10/typed-javascript.html
    

    View Slide

58. https://www.youtube.com/watch?v=M8x0bc81smU
    

    View Slide

59. 劢⢵
    

    View Slide

60. Old Proposals
    Types Old proposal (2009)
    Guards Convenient syntax for Trademarks
    Trademarks Newer proposal (2011) by Waldemar Horwat
    

    View Slide

61. Old Proposals
    Types http://wiki.ecmascript.org/doku.php?id=strawman:types
    Guards http://wiki.ecmascript.org/doku.php?id=strawman:guards
    Trademarks http://wiki.ecmascript.org/doku.php?id=strawman:trademarks
    

    View Slide

62. Type
    var ho = {
    id: 123,
    desc: "hoho"
    } : {
    id: int,
    desc: string
    }
    

    View Slide

63. Guard
    var ho = {
    id :: Integer : 123,
    desc :: String : "hoho"
    }
    

    View Slide

64. https://www.youtube.com/watch?v=lGdnh8QSPPk
    

    View Slide

65. http://goo.gl/pwk6Pb
    

    View Slide

66. Now
    • AtScript no more activity
    • Angular 2.0 uses TypeScript
    • TypeScript might merge to ES.next
    

    View Slide

67. • Microsoft, Google, Facebook are talking together
    about type in ECMAScript
    

    View Slide

68. SoundScript
    • V8 experiment
    • TypeScript compatible syntax
    • —strong-mode
    https://developers.google.com/v8/experiments#sound
    

    View Slide

69. "use stricter+types";
    

    View Slide

70. https://drive.google.com/file/d/0B1v38H64XQBNT1p2XzFGWWhCR1k/view
    

    View Slide

71. One more thing
    

    View Slide

72. Annotation
    • Metadata will be parse and use by compiler and
    runtime
    • Type annotation tells the variable data type to
    compiler
    

    View Slide

73. • How about we want declare some characteristic
    on objects, methods?
    • memorize
    • readonly
    • ….
    

    View Slide

74. Decorator
    • Syntax sugar
    • Looks like annotation
    • Like Python decorator
    • by Yehuda Katz
    

    View Slide

75. https://github.com/rwaldron/tc39-notes/blob/master/es6/2014-04/apr-10.md#decorators-for-es7
    

    View Slide

76. https://github.com/Microsoft/TypeScript/issues/1557#issuecomment-77709527
    

    View Slide

77. https://github.com/wycats/javascript-decorators
    

    View Slide

78. class M {
    @memorize
    fib(n) {
    if (n < 2) { return n }
    return this.fib(n - 1)
    + this.fib(n - 2)
    }
    }
    

    View Slide

79. class M {
    @memorize
    fib(n) {
    if (n < 2) { return n }
    return this.fib(n - 1)
    + this.fib(n - 2)
    }
    }
    

    View Slide

80. var M = (function () {
    class M {
    fib(n) {
    if (n < 2) { return n }
    return this.fib(n - 1) + this.fib(n - 2)
    }
    }
    var _temp
    _temp = memorize(Foo.prototype, "fib") || _temp
    if (_temp) Object.defineProperty(M.prototype, "fib", _temp)
    return M
    })()
    

    View Slide

81. function memorize(target, name, descriptor) {
    let getter = descriptor.get, setter = descriptor.set;
    descriptor.get = function() {
    let table = memorizationFor(this);
    if (name in table) { return table[name]; }
    return table[name] = getter.call(this);
    }
    descriptor.set = function(val) {
    let table = memorizationFor(this);
    setter.call(this, val);
    table[name] = val;
    }
    return descriptor;
    }
    https://github.com/wycats/javascript-decorators
    

    View Slide

82. http://goo.gl/pwk6Pb
    

    View Slide

83. View Slide

84. https://github.com/jonathandturner/brainstorming
    

    View Slide

85. • Another version by Jonathan Turner
    • Work for TypeScript at Microsoft
    • TC39 member, work for decorator now
    

    View Slide

86. Questions?
    

    View Slide