Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
TypeScript, future and past
othree
May 15, 2015
Technology
2
2.1k
TypeScript, future and past
Modern Web Conference 2015
othree
May 15, 2015
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
1.2k
WAT JavaScript Date
othree
3
1.6k
Modern HTML Email Development
othree
3
2.4k
MRT & GIT
othree
1
1.5k
YAJS.vim and Vim Syntax Highlight
othree
1
2.2k
Web Trends to 2015
othree
4
270
Transducer
othree
9
2.5k
HITCON 11 Photographer
othree
4
390
fetch is the new XHR
othree
6
3.4k
Other Decks in Technology
See All in Technology
初めてのデータ移行プロジェクトから得た学び
tjmtmmnk
0
380
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
120
SignalR を使ったアプリケーション開発をより快適に!
nenonaninu
0
670
AI Builderについて
miyakemito
1
950
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
170
Logbii(ログビー) 会社紹介
logbii
0
150
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
160
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
240
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
160
re:Invent発表のサービスを取り入れて加速する弥生のSecurity&Governance / accelerating YAYOI's Security and Governance with services announced at reinvent
yayoi_dd
0
130
インフラ技術基礎勉強会 開催概要
toru_kubota
0
180
データベースの発表には RDBMS 以外もありますよ
maroon1st
0
240
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Docker and Python
trallard
30
1.9k
Faster Mobile Websites
deanohume
295
29k
The Invisible Side of Design
smashingmag
292
48k
Embracing the Ebb and Flow
colly
75
3.6k
What the flash - Photography Introduction
edds
64
10k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Why Our Code Smells
bkeepers
PRO
326
55k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Become a Pro
speakerdeck
PRO
6
3.2k
Bootstrapping a Software Product
garrettdimon
299
110k
Transcript
TypeScript future and past othree @ modern web conf
Notice Codes in this slide might be invalid
Notice Codes in this slide might be invalid Even in
the future
Type • JavaScript is dynamic type • No type check
at compile time and run time
var hey hey = 1 hey = 'this is string'
hey = false
int hey hey = 1 hey = 'this is string'
// Error hey = false // Error
Pros • Compiler optimization • Reliability for large scale app
• IDE support http://stackoverflow.com/questions/125367/dynamic-type-languages-versus-static-type-languages
麕
ECMAScript 4 • Lots of new features • Type annotation
• Static type check http://www.ecmascript.org/es4/spec/overview.pdf
var hey:number hey = 1 hey = 'this is string’
// TypeError hey = false // TypeError
var ho = { id: 123, desc: "hoho" } :
{ id: int, desc: string }
type Tuple = { id: int, desc: string } var
ho = { id: 123, desc: "hoho" } : Tuple
ECMAScript 4 • Deprecated to be ECMAScript standard • Live
in ActionScript 3 • Flash, Flex
植㖈
• Type in compile to JavaScript languages
None
TypeScript • Microsoft, 2012 • Add type and several features
to JavaScript(ES5) • JavaScript Superset
TypeScript Type Class Generics Module
Type • Optional type annotation • Compile time type check
• Type definition file
var hey:number hey = 1 hey = 'this is string’
// Error hey = false // Error
var hey:number hey = 1 hey = 'this is string’
// Compile Error hey = false // Compile Error
var hey hey = 1
interface Tuple { id: number; desc: string; } var ho:Tuple
= { id: 123, desc: "hoho" }
Definition File • Like C++ header file • Define library
interface • File extension: .d.ts • Work with Visual Studio, TernJS
None
700+ libs
None
Projects • AngularJS 2 • Asana • Immutable.js • Shumway
by Mozilla
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
http://goo.gl/pwk6Pb
http://goo.gl/pwk6Pb
Angular Team not Satisfy
AtScript • Google Angular Team, 2014 • Annotation, Introspection •
At means @
http://atscript.org
http://goo.gl/pwk6Pb
http://goo.gl/pwk6Pb
Annotation • 垦鏽 • Store meta data • Accessible in
runtime • Like Java annotation
@Memorize function fib(n) { if (n < 2) { return
n } return fib(n - 1) + fib(n - 2) }
function fib(n) { if (n < 2) { return n
} return fib(n - 1) + fib(n - 2) } fib.annotations = [ new Memorize() ]
Runtime Readable • Use `new` to create a new instance
• Store under `annotations`
Introspection • Ⰹ溁 • Runtime type check
Runtime Type Check • No magic • Add code to
check type • Use assert.js
None
function fib(n:number):number { if (n < 2) { return n
} return fib(n - 1) + fib(n - 2) }
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 ) }
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 ) }
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 ) }
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 ); }
Performance Impact • Yes, of course • Only run type
check at development time • Compile to no type check version for production
AtScript Compiler • Use traceur with options
AtScript Playground • Traceur environment ready for play https://github.com/angular/atscript-playground
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" } }
{ "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
Facebook want Their Own Solution
Flow • Facebook’s static type checker • Compatible with TypeScript’s
syntax • Several difference
None
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
https://www.youtube.com/watch?v=M8x0bc81smU
劢⢵
Old Proposals Types Old proposal (2009) Guards Convenient syntax for
Trademarks Trademarks Newer proposal (2011) by Waldemar Horwat
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
Type var ho = { id: 123, desc: "hoho" }
: { id: int, desc: string }
Guard var ho = { id :: Integer : 123,
desc :: String : "hoho" }
https://www.youtube.com/watch?v=lGdnh8QSPPk
http://goo.gl/pwk6Pb
Now • AtScript no more activity • Angular 2.0 uses
TypeScript • TypeScript might merge to ES.next
• Microsoft, Google, Facebook are talking together about type in
ECMAScript
SoundScript • V8 experiment • TypeScript compatible syntax • —strong-mode
https://developers.google.com/v8/experiments#sound
"use stricter+types";
https://drive.google.com/file/d/0B1v38H64XQBNT1p2XzFGWWhCR1k/view
One more thing
Annotation • Metadata will be parse and use by compiler
and runtime • Type annotation tells the variable data type to compiler
• How about we want declare some characteristic on objects,
methods? • memorize • readonly • ….
Decorator • Syntax sugar • Looks like annotation • Like
Python decorator • by Yehuda Katz
https://github.com/rwaldron/tc39-notes/blob/master/es6/2014-04/apr-10.md#decorators-for-es7
https://github.com/Microsoft/TypeScript/issues/1557#issuecomment-77709527
https://github.com/wycats/javascript-decorators
class M { @memorize fib(n) { if (n < 2)
{ return n } return this.fib(n - 1) + this.fib(n - 2) } }
class M { @memorize fib(n) { if (n < 2)
{ return n } return this.fib(n - 1) + this.fib(n - 2) } }
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 })()
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
http://goo.gl/pwk6Pb
None
https://github.com/jonathandturner/brainstorming
• Another version by Jonathan Turner • Work for TypeScript
at Microsoft • TC39 member, work for decorator now
Questions?