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
1.9k
WAT JavaScript Date
othree
3
1.9k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2.1k
YAJS.vim and Vim Syntax Highlight
othree
1
2.7k
Web Trends to 2015
othree
4
310
Transducer
othree
9
2.9k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Technology
See All in Technology
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
6
830
AWSLambdaMCPServerを使ってツールとMCPサーバを分離する
tkikuchi
1
3k
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
270
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
120
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
1.4k
Amazon CloudWatch Application Signals ではじめるバーンレートアラーム / Burn rate alarm with Amazon CloudWatch Application Signals
ymotongpoo
5
510
React ABC Questions
hirotomoyamada
0
200
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
13
4.7k
ここはMCPの夜明けまえ
nwiizo
18
7k
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
290
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
6
540
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
1
560
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
37
1.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
660
Six Lessons from altMBA
skipperchong
27
3.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Producing Creativity
orderedlist
PRO
344
40k
The Language of Interfaces
destraynor
157
25k
Designing for humans not robots
tammielis
252
25k
Adopting Sorbet at Scale
ufuk
76
9.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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?