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
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
610
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
260
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
290
Observability for LLM Application lifecycle
ivry_presentationmaterials
1
220
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
370
Goでマークダウンの独自記法を実装する
lag129
0
200
.NET開発者のためのAzureの概要
tomokusaba
0
220
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
170
帳票Vibe Coding
terurou
0
130
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
630
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.5k
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
0
190
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Applications with DynamoDB
mza
96
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Gamification - CAS2011
davidbonilla
81
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Code Reviewing Like a Champion
maltzj
525
40k
Statistics for Hackers
jakevdp
799
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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?