Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. int hey hey = 1 hey = 'this is string'

    // Error hey = false // Error
  2. Pros • Compiler optimization • Reliability for large scale app

    • IDE support http://stackoverflow.com/questions/125367/dynamic-type-languages-versus-static-type-languages
  3. ECMAScript 4 • Lots of new features • Type annotation

    • Static type check http://www.ecmascript.org/es4/spec/overview.pdf
  4. var hey:number hey = 1 hey = 'this is string’

    // TypeError hey = false // TypeError
  5. var ho = { id: 123, desc: "hoho" } :

    { id: int, desc: string }
  6. type Tuple = { id: int, desc: string } var

    ho = { id: 123, desc: "hoho" } : Tuple
  7. TypeScript • Microsoft, 2012 • Add type and several features

    to JavaScript(ES5) • JavaScript Superset
  8. var hey:number hey = 1 hey = 'this is string’

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

    // Compile Error hey = false // Compile Error
  10. Definition File • Like C++ header file • Define library

    interface • File extension: .d.ts • Work with Visual Studio, TernJS
  11. 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
  12. @Memorize function fib(n) { if (n < 2) { return

    n } return fib(n - 1) + fib(n - 2) }
  13. function fib(n) { if (n < 2) { return n

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

    } return fib(n - 1) + fib(n - 2) }
  15. 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 ) }
  16. 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 ) }
  17. 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 ) }
  18. 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 ); }
  19. Performance Impact • Yes, of course • Only run type

    check at development time • Compile to no type check version for production
  20. 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" } }
  21. { "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
  22. 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
  23. Old Proposals Types Old proposal (2009) Guards Convenient syntax for

    Trademarks Trademarks Newer proposal (2011) by Waldemar Horwat
  24. Type var ho = { id: 123, desc: "hoho" }

    : { id: int, desc: string }
  25. Guard var ho = { id :: Integer : 123,

    desc :: String : "hoho" }
  26. Now • AtScript no more activity • Angular 2.0 uses

    TypeScript • TypeScript might merge to ES.next
  27. Annotation • Metadata will be parse and use by compiler

    and runtime • Type annotation tells the variable data type to compiler
  28. • How about we want declare some characteristic on objects,

    methods? • memorize • readonly • ….
  29. class M { @memorize fib(n) { if (n < 2)

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

    { return n } return this.fib(n - 1) + this.fib(n - 2) } }
  31. 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 })()
  32. 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
  33. • Another version by Jonathan Turner • Work for TypeScript

    at Microsoft • TC39 member, work for decorator now