Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript, future and past
Search
othree
May 15, 2015
Technology
2
2.3k
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
2k
WAT JavaScript Date
othree
3
2k
Modern HTML Email Development
othree
3
2.7k
MRT & GIT
othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.8k
Web Trends to 2015
othree
4
320
Transducer
othree
9
3k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Technology
See All in Technology
Goでマークダウンの独自記法を実装する
lag129
0
220
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
630
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
550
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
130
EKS Pod Identity における推移的な session tags
z63d
1
200
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
DeNA での思い出 / Memories at DeNA
orgachem
PRO
3
1.6k
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
1
310
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
660
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
150
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
4
760
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Building an army of robots
kneath
306
46k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Site-Speed That Sticks
csswizardry
10
790
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
YesSQL, Process and Tooling at Scale
rocio
173
14k
Gamification - CAS2011
davidbonilla
81
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Code Reviewing Like a Champion
maltzj
525
40k
Balancing Empowerment & Direction
lara
2
590
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?