$30 off During Our Annual Pro Sale. View Details »

TypeScript, future and past

othree
May 15, 2015

TypeScript, future and past

Modern Web Conference 2015

othree

May 15, 2015
Tweet

More Decks by othree

Other Decks in Technology

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