TypeScript, future and past

Modern Web Conference 2015

Transcript

1. TypeScript
 future and past othree @ modern web conf
2. Notice Codes in this slide might be invalid
3. Notice Codes in this slide might be invalid Even in the future
4. Type • JavaScript is dynamic type • No type check at compile time and run time
5. var hey hey = 1 hey = 'this is string' hey = false
6. int hey hey = 1 hey = 'this is string' // Error hey = false // Error
7. Pros • Compiler optimization • Reliability for large scale app • IDE support http://stackoverflow.com/questions/125367/dynamic-type-languages-versus-static-type-languages
8. 麕⿡
9. ECMAScript 4 • Lots of new features • Type annotation • Static type check http://www.ecmascript.org/es4/spec/overview.pdf
10. var hey:number hey = 1 hey = 'this is string’ // TypeError hey = false // TypeError
11. var ho = { id: 123, desc: "hoho" } : { id: int, desc: string }
12. type Tuple = { id: int, desc: string } var ho = { id: 123, desc: "hoho" } : Tuple
13. ECMAScript 4 • Deprecated to be ECMAScript standard • Live in ActionScript 3 • Flash, Flex
14. 植㖈
15. • Type in compile to JavaScript languages
17. TypeScript • Microsoft, 2012 • Add type and several features to JavaScript(ES5) • JavaScript Superset
18. TypeScript Type Class Generics Module
19. Type • Optional type annotation • Compile time type check • Type definition file
20. var hey:number hey = 1 hey = 'this is string’ // Error hey = false // Error
21. var hey:number hey = 1 hey = 'this is string’ // Compile Error hey = false // Compile Error
22. var hey hey = 1
23. interface Tuple { id: number; desc: string; } var ho:Tuple = { id: 123, desc: "hoho" }
24. Definition File • Like C++ header file • Define library interface • File extension: .d.ts • Work with Visual Studio, TernJS
26. 700+ libs
28. Projects • AngularJS 2 • Asana • Immutable.js • Shumway by Mozilla
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
30. http://goo.gl/pwk6Pb
31. http://goo.gl/pwk6Pb
32. Angular Team not Satisfy
33. AtScript • Google Angular Team, 2014 • Annotation, Introspection • At means @
34. http://atscript.org
35. http://goo.gl/pwk6Pb
36. http://goo.gl/pwk6Pb
37. Annotation • 垦鏽 • Store meta data • Accessible in runtime • Like Java annotation
38. @Memorize function fib(n) { if (n < 2) { return n } return fib(n - 1) + fib(n - 2) }
39. function fib(n) { if (n < 2) { return n } return fib(n - 1) + fib(n - 2) } fib.annotations = [ new Memorize() ]
40. Runtime Readable • Use `new` to create a new instance • Store under `annotations`
41. Introspection • Ⰹ溁 • Runtime type check
42. Runtime Type Check • No magic • Add code to check type • Use assert.js
44. function fib(n:number):number { if (n < 2) { return n } return fib(n - 1) + fib(n - 2) }
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 ) }
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 ) }
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 ) }
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 ); }
49. Performance Impact • Yes, of course • Only run type check at development time • Compile to no type check version for production
50. AtScript Compiler • Use traceur with options
51. AtScript Playground • Traceur environment ready for play https://github.com/angular/atscript-playground
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" } }
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
54. Facebook want Their Own Solution
55. Flow • Facebook’s static type checker • Compatible with TypeScript’s syntax • Several difference
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
58. https://www.youtube.com/watch?v=M8x0bc81smU
59. 劢⢵
60. Old Proposals Types Old proposal (2009) Guards Convenient syntax for Trademarks Trademarks Newer proposal (2011) by Waldemar Horwat
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
62. Type var ho = { id: 123, desc: "hoho" } : { id: int, desc: string }
63. Guard var ho = { id :: Integer : 123, desc :: String : "hoho" }
64. https://www.youtube.com/watch?v=lGdnh8QSPPk
65. http://goo.gl/pwk6Pb
66. Now • AtScript no more activity • Angular 2.0 uses TypeScript • TypeScript might merge to ES.next
67. • Microsoft, Google, Facebook are talking together about type in ECMAScript
68. SoundScript • V8 experiment • TypeScript compatible syntax • —strong-mode https://developers.google.com/v8/experiments#sound
69. "use stricter+types";
70. https://drive.google.com/file/d/0B1v38H64XQBNT1p2XzFGWWhCR1k/view
71. One more thing
72. Annotation • Metadata will be parse and use by compiler and runtime • Type annotation tells the variable data type to compiler
73. • How about we want declare some characteristic on objects, methods? • memorize • readonly • ….
74. Decorator • Syntax sugar • Looks like annotation • Like Python decorator • by Yehuda Katz
75. https://github.com/rwaldron/tc39-notes/blob/master/es6/2014-04/apr-10.md#decorators-for-es7
76. https://github.com/Microsoft/TypeScript/issues/1557#issuecomment-77709527
77. https://github.com/wycats/javascript-decorators
78. class M { @memorize fib(n) { if (n < 2) { return n } return this.fib(n - 1) + this.fib(n - 2) } }
79. class M { @memorize fib(n) { if (n < 2) { return n } return this.fib(n - 1) + this.fib(n - 2) } }
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 })()
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
82. http://goo.gl/pwk6Pb
84. https://github.com/jonathandturner/brainstorming
85. • Another version by Jonathan Turner • Work for TypeScript at Microsoft • TC39 member, work for decorator now
86. Questions?