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
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
6
1.7k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
390
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Agile that works and the tools we love
rasmusluckow
329
21k
The Invisible Side of Design
smashingmag
301
51k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Scaling GitHub
holman
460
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Writing Fast Ruby
sferik
628
62k
Code Reviewing Like a Champion
maltzj
524
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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?