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