TypeScript future and past othree @ modern web conf Notice Codes - - PowerPoint PPT Presentation

▶
typescript future and past
SMART_READER_LITE
LIVE PREVIEW

TypeScript future and past othree @ modern web conf Notice Codes - - PowerPoint PPT Presentation

Jun 03, 2023 382 likes •1.25k views

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

slide-1
SLIDE 1

TypeScript


future and past

  • three @ modern web conf
slide-2
SLIDE 2

Notice

Codes in this slide might be invalid

slide-3
SLIDE 3

Notice

Codes in this slide might be invalid Even in the future

slide-4
SLIDE 4

Type

  • JavaScript is dynamic type
  • No type check at compile time and run time
slide-5
SLIDE 5

var hey hey = 1 hey = 'this is string' hey = false

slide-6
SLIDE 6

int hey hey = 1 hey = 'this is string' // Error hey = false // Error

slide-7
SLIDE 7

Pros

  • Compiler optimization
  • Reliability for large scale app
  • IDE support

http:/ /stackoverfmow.com/questions/125367/dynamic-type-languages-versus-static-type-languages

slide-8
SLIDE 8
slide-9
SLIDE 9

ECMAScript 4

  • Lots of new features
  • Type annotation
  • Static type check

http:/ /www.ecmascript.org/es4/spec/overview.pdf

slide-10
SLIDE 10

var hey:number hey = 1 hey = 'this is string’ // TypeError hey = false // TypeError

slide-11
SLIDE 11

var ho = { id: 123, desc: "hoho" } : { id: int, desc: string }

slide-12
SLIDE 12

type Tuple = { id: int, desc: string } var ho = { id: 123, desc: "hoho" } : Tuple

slide-13
SLIDE 13

ECMAScript 4

  • Deprecated to be ECMAScript standard
  • Live in ActionScript 3
  • Flash, Flex
slide-14
SLIDE 14
slide-15
SLIDE 15
  • Type in compile to JavaScript languages
slide-16
SLIDE 16
slide-17
SLIDE 17

TypeScript

  • Microsoft, 2012
  • Add type and several features to JavaScript(ES5)
  • JavaScript Superset
slide-18
SLIDE 18

TypeScript

Type Class Generics Module

slide-19
SLIDE 19

Type

  • Optional type annotation
  • Compile time type check
  • Type definition file
slide-20
SLIDE 20

var hey:number hey = 1 hey = 'this is string’ // Error hey = false // Error

slide-21
SLIDE 21

var hey:number hey = 1 hey = 'this is string’ // Compile Error hey = false // Compile Error

slide-22
SLIDE 22

var hey hey = 1

slide-23
SLIDE 23

interface Tuple { id: number; desc: string; } var ho:Tuple = { id: 123, desc: "hoho" }

slide-24
SLIDE 24

Definition File

  • Like C++ header file
  • Define library interface
  • File extension: .d.ts
  • Work with Visual Studio, TernJS
slide-25
SLIDE 25
slide-26
SLIDE 26

700+ libs

slide-27
SLIDE 27
slide-28
SLIDE 28

Projects

  • AngularJS 2
  • Asana
  • Immutable.js
  • Shumway by Mozilla
slide-29
SLIDE 29

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

slide-30
SLIDE 30

http:/ /goo.gl/pwk6Pb

slide-31
SLIDE 31

http:/ /goo.gl/pwk6Pb

slide-32
SLIDE 32

Angular Team not Satisfy

slide-33
SLIDE 33

AtScript

  • Google Angular Team, 2014
  • Annotation, Introspection
  • At means @
slide-34
SLIDE 34

http:/ /atscript.org

slide-35
SLIDE 35

http:/ /goo.gl/pwk6Pb

slide-36
SLIDE 36

http:/ /goo.gl/pwk6Pb

slide-37
SLIDE 37

Annotation

  • Store meta data
  • Accessible in runtime
  • Like Java annotation
slide-38
SLIDE 38

@Memorize function fib(n) { if (n < 2) { return n } return fib(n - 1) + fib(n - 2) }

slide-39
SLIDE 39

function fib(n) { if (n < 2) { return n } return fib(n - 1) + fib(n - 2) } fib.annotations = [ new Memorize() ]

slide-40
SLIDE 40

Runtime Readable

  • Use `new` to create a new instance
  • Store under `annotations`
slide-41
SLIDE 41

Introspection

  • Runtime type check
slide-42
SLIDE 42

Runtime Type Check

  • No magic
  • Add code to check type
  • Use assert.js
slide-43
SLIDE 43
slide-44
SLIDE 44

function fib(n:number):number { if (n < 2) { return n } return fib(n - 1) + fib(n - 2) }

slide-45
SLIDE 45

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 ) }

slide-46
SLIDE 46

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 ) }

slide-47
SLIDE 47

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 ) }

slide-48
SLIDE 48

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 ); }

slide-49
SLIDE 49

Performance Impact

  • Yes, of course
  • Only run type check at development time
  • Compile to no type check version for production
slide-50
SLIDE 50

AtScript Compiler

  • Use traceur with options
slide-51
SLIDE 51

AtScript Playground

  • Traceur environment ready for play

https:/ /github.com/angular/atscript-playground

slide-52
SLIDE 52

https:/ /github.com/angular/atscript-playground/blob/master/confjg.json

{ "traceur": { "modules": "amd", "script": false, "types": true, "typeAssertions": true, "typeAssertionModule": "assert", "annotations": true, "sourceMaps": "file" } }

slide-53
SLIDE 53

{ "traceur": { "modules": "amd", "script": false, "types": true, "typeAssertions": true, "typeAssertionModule": "assert", "annotations": true, "sourceMaps": "file" } }

https:/ /github.com/angular/atscript-playground/blob/master/confjg.json

slide-54
SLIDE 54

Facebook want Their Own Solution

slide-55
SLIDE 55

Flow

  • Facebook’s static type checker
  • Compatible with TypeScript’s syntax
  • Several difference
slide-56
SLIDE 56
slide-57
SLIDE 57

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

slide-58
SLIDE 58

https:/ /www.youtube.com/watch?v=M8x0bc81smU

slide-59
SLIDE 59
slide-60
SLIDE 60

Old Proposals

Types

Old proposal (2009)

Guards

Convenient syntax for Trademarks

Trademarks

Newer proposal (2011) by Waldemar Horwat

slide-61
SLIDE 61

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

slide-62
SLIDE 62

Type

var ho = { id: 123, desc: "hoho" } : { id: int, desc: string }

slide-63
SLIDE 63

Guard

var ho = { id :: Integer : 123, desc :: String : "hoho" }

slide-64
SLIDE 64

https://www.youtube.com/watch?v=lGdnh8QSPPk

slide-65
SLIDE 65

http:/ /goo.gl/pwk6Pb

slide-66
SLIDE 66

Now

  • AtScript no more activity
  • Angular 2.0 uses TypeScript
  • TypeScript might merge to ES.next
slide-67
SLIDE 67
  • Microsoft, Google, Facebook are talking together

about type in ECMAScript

slide-68
SLIDE 68

SoundScript

  • V8 experiment
  • TypeScript compatible syntax
  • —strong-mode

https:/ /developers.google.com/v8/experiments#sound

slide-69
SLIDE 69

"use stricter+types";

slide-70
SLIDE 70

https:/ /drive.google.com/fjle/d/0B1v38H64XQBNT1p2XzFGWWhCR1k/view

slide-71
SLIDE 71

One more thing

slide-72
SLIDE 72

Annotation

  • Metadata will be parse and use by compiler and

runtime

  • Type annotation tells the variable data type to

compiler

slide-73
SLIDE 73
  • How about we want declare some characteristic
  • n objects, methods?
  • memorize
  • readonly
  • ….
slide-74
SLIDE 74

Decorator

  • Syntax sugar
  • Looks like annotation
  • Like Python decorator
  • by Yehuda Katz
slide-75
SLIDE 75

https:/ /github.com/rwaldron/tc39-notes/blob/master/es6/2014-04/apr-10.md#decorators-for-es7

slide-76
SLIDE 76

https:/ /github.com/Microsoft/TypeScript/issues/1557#issuecomment-77709527

slide-77
SLIDE 77

https:/ /github.com/wycats/javascript-decorators

slide-78
SLIDE 78

class M { @memorize fib(n) { if (n < 2) { return n } return this.fib(n - 1) + this.fib(n - 2) } }

slide-79
SLIDE 79

class M { @memorize fib(n) { if (n < 2) { return n } return this.fib(n - 1) + this.fib(n - 2) } }

slide-80
SLIDE 80

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 })()

slide-81
SLIDE 81

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

slide-82
SLIDE 82

http:/ /goo.gl/pwk6Pb

slide-83
SLIDE 83
slide-84
SLIDE 84

https:/ /github.com/jonathandturner/brainstorming

slide-85
SLIDE 85
  • Another version by Jonathan Turner
  • Work for TypeScript at Microsoft
  • TC39 member, work for decorator now
slide-86
SLIDE 86

Questions?