Download - Dependent Types for JavaScript

DependentTypes for JavaScript

Ravi Chugh Ranjit JhalaUniversity of California, San Diego

David HermanMozilla Research


Why?

Pervasive

Used at Massive Scale

3

Why Add Types?

var x = {};

x.f;

x.f.f;

produces undefined rather than error…

… but this raises TypeError

4

Why Add Types?

There Are Run-time Errorsreading from undefined, applying non-function values, …

Worse: Browsers Hide Them!

var x = {};

x.f;

x.f.f;

5

Why Add Types?

Prevent Errors

Prevent the Unexpected

6

Okay, But Who Cares?

ProgrammersJSLint, Closure Compiler, TypeScript, Dart

Browser VendorsCompete based on performance, security, reliability

Standards CommitteesActively evolving JavaScript and Web standards


Why?

Isn’t the Language Terrible?

8

JavaScript

implicit global object

scope manipulation

var lifting

‘,,,’ == new Array(4)

9

JavaScript


scope manipulation

var lifting

‘,,,’ == new Array(4)

objects prototypes

lambdastype-tests

10

JavaScript

“The Good Parts”


scope manipulation

var lifting

‘,,,’ == new Array(4)

objects prototypes

lambdastype-tests

11

JavaScript


PriorType

Systems

Key Idea:Use Logic!

Our Approach

12

JavaScript


Dependent JavaScriptDJS

13

Outline

Motivation

Our Approach: Logic!

Evaluation

14

typeof true // “boolean”

typeof 0.1 // “number”typeof 0 // “number”

typeof {} // “object”typeof [] // “object”typeof null // “object”

15

typeof returns run-time “tags”

Tags are very coarse-grained types

“undefined”

“boolean”

“string”

“number”

“object”

“function”

16

Refinement Types{x|p}

“set of values x s.t. formula p is true”

{n|tag(n) = “number” }Num

{v|tag(v) = “number” ∨ tag(v) = “boolean” }NumOrBool

{i|tag(i) = “number” integer(i) }Int

{x|true }Any

17

{n|tag(n) = “number” }Num

{v|tag(v) = “number” ∨ tag(v) = “boolean” }NumOrBool

{i|tag(i) = “number” integer(i) }Int

{x|true }Any

Refinement Types

Syntactic Sugarfor Common Types

Refinement Types

18

3 :: {n|n = 3}

{n|n > 0} 3 ::{n|tag(n) = “number” integer(n)} 3 ::{n|tag(n) = “number”} 3 ::

Refinement Types

19

{n|n = 3}

{n|n > 0} {n|tag(n) = “number” integer(n)} {n|tag(n) = “number” }

<:<:<:<:

Subtyping is Implication

Refinement Types

20

{n|n = 3}

{n|n > 0} {n|tag(n) = “number” integer(n)} {n|tag(n) = “number” }

Subtyping is Implication

21

ArraysPrototypesMutable ObjectsDuck TypingTag-Tests

22

Tag-Tests ArraysPrototypesMutable ObjectsDuck Typing

var negate = function(x) {

if (typeof x == “boolean”)

return !x;

else

return 0 - x;

}

negate( )

!true

true

// false

23




return !x;

else

return 0 - x;

}

negate( )

0 - 2 // -2

2

24




return !x;

else

return 0 - x;

}

negate( )

0 - [] // 0WAT?!

[]

25




return !x;

else

return 0 - x;

} Use types to prevent implicit coercion

(-) :: (Num,Num) Num

26




return !x;

else

return 0 - x;

}

Function type annotation inside

comments

//: negate :: (x:Any) Any

27




return !x;

else

return 0 - x;

}


so negationis well-typed

x is boolean...

DJS is Path Sensitive

✓

28




return !x;

else

return 0 - x;

}


x is arbitrarynon-boolean value…so DJS signals error!

✗

DJS is Path Sensitive

✗

29




return !x;

else

return 0 - x;

}

//: negate :: (x:NumOrBool) Any

✓

30




return !x;

else

return 0 - x;

}

//: negate :: (x:NumOrBool) Any

this time,x is a number…✓so subtractionis well-typed

31




return !x;

else

return 0 - x;

}

//: negate :: (x:NumOrBool) Any✓

but returntype is imprecise

32


//: negate :: (x:NumOrBool) NumOrBool



return !x;

else

return 0 - x;

}

✓

33


/*: negate :: (x:NumOrBool) {v|tag(v) = tag(x)} */



return !x;

else

return 0 - x;

}

✓

output type depends on input value

34


/*: negate :: (x:NumOrBool) {v|tag(v) = tag(x)} */

Programmer choosesdegree of precision

in specification

35

Duck Typing ArraysPrototypesMutable ObjectsTag-Tests

if (duck.quack)

return “Duck says ” + duck.quack();

else

return “This duck can’t quack!”;

What is “Duck Typing”?

36


if (duck.quack)


else



(+) :: (Num,Num) Num

(+) :: (Str,Str) Str

37


if (duck.quack)


else



Can dynamically testthe presence of a method

but not its type

38


if (duck.quack)


else


{d|tag(d) = “Dict”∧

{v|has(d,“quack”)

{v| sel(d,“quack”) :: UnitStr }

Operators from McCarthy theory of arrays

39


if (duck.quack)


else




{v| sel(d,“quack”) :: Unit Str }

Call produces Str, so concat well-typed

✓

40

Mutable Objects ArraysPrototypesTag-Tests Duck Typing

var x = {};

x.f = 7;

x.f + 2;

x0:Empty

x1:{d|d = upd(x0,“f”,7)}

DJS is Flow Sensitive

McCarthy operatorDJS verifies that x.f is definitely a number

41

Mutable Objects ArraysPrototypesTag-Tests Duck Typing

var x = {};

x.f = 7;

x.f + 2;

x0:Empty

x1:{d|d = upd(x0,“f”,7)}

DJS is Flow Sensitive

Strong updates to singleton objects

Weak updates to collections of objects

42

ArraysPrototypesTag-Tests Duck Typing Mutable Objects

43


Typical“Dynamic”Features

44


Typical“Dynamic”Features

JavaScript

tl;dr

Harder, butDJS handles them

45

Prototypes ArraysTag-Tests Mutable ObjectsDuck Typing

child

parent

...

grandpa

null

Upon construction, each object links to a

prototype object

46


If child contains k, then Read k from child

Else if parent contains k, then Read k from parent

Else if grandpa contains k, then Read k from grandpa

Else if …

Else Return undefined

child

parent

...

grandpa

null

var k = “first”; child[k];Semantics of Key Lookup

...

47


child

parent

grandpa

null

H(Rest of Heap)





Else if …


{v|if has(child,k) then

{v|ifv=sel(child,k)

...

48


child

parent

grandpa

null

H(Rest of Heap)





Else if …



{v|ifv=sel(child,k)

{v|else if has(parent,k) then

{v|ifv=sel(parent,k)




Else if …


...

49



{v|ifv=sel(child,k)



child

parent

grandpa ???

null

H(Rest of Heap)


...

50



{v|ifv=sel(child,k)



{v|else

{v|ifv=HeapSel(H,grandpa,k)) }

child

parent

grandpa ???

null

H(Rest of Heap)


Abstract predicateto summarize theunknown portion

of the prototype chain

...

51



{v|ifv=sel(child,k)



{v|else


{ “first” : “John” }child

parent{ “first” : “Ida”, “last” : “McCarthy” }

grandpa ???

null

H(Rest of Heap)

<:

{v|v=“John”}

var k = “first”; child[k];

...

52



{v|ifv=sel(child,k)



{v|else


{ “first” : “John” }child

parent{ “first” : “Ida”, “last” : “McCarthy” }

grandpa ???

null

H(Rest of Heap)

var k = “last”; child[k];

<:

{v|v=“McCarthy”}

53


Key Idea:

Reduce prototypesemantics to decidable

theory of arrays

Prototype Chain Unrolling

54

ArraysTag-Tests PrototypesMutable ObjectsDuck Typing

var nums = [0,1,2]while (…) { nums[nums.length] = 17}

A finite tuple…

… extended to unbounded collection

55


var nums = [0,1,2]while (…) { nums[nums.length] = 17}

delete nums[1]

for (i = 0; i < nums.length; i++) sum += nums[i]

A “hole” in the array

Missing element within “length”

56


Track types, “packedness,” and lengthof arrays where possible

{a |a :: Arr(T)

{a | packed(a)

{a | len(a) = 10}

X T T T T… X ……

T? T? T? T? T?… T? ……

T? { x | T(x) x = undefined }

-1 0 1 2 len(a)

X { x | x = undefined }

57


{a |a :: Arr(Any)

{a | packed(a) len(a) = 2

{a | Int(sel(a,0))

{a | Str(sel(a,1))}

Encode tuples as arrays

var tup = [17, “cacti”]

58


var tup = [17, “cacti”]

tup[tup.length] = true

{a |a :: Arr(Any)

{a | packed(a) len(a) = 3

{a | …}

59


DJS handles other quirks:

Special length property

Array.prototypeNon-integer keys

60

Tag-Tests PrototypesMutable ObjectsDuck Typing Arrays

61

What About eval?

Arbitrary code loading

…

eval(“…”);

…

Old Types

62

What About eval?…

eval(“…”);

//: #assume

…

Old Types

New TypesNew Types

“Contract Checking” at Run-timeaka “Gradual Typing”

63

Recap of DJS Techniques

Logic!

Path and Flow Sensitivity

Prototype Unrolling

Syntactic Sugar

64

Outline

Motivation

Our Approach: Logic!

Evaluation

65


objects prototypes

lambdastype-tests

arrays

13 Benchmarks

66


objects prototypes

lambdastype-tests

arrays

13 Benchmarks

67


objects prototypes

lambdastype-tests

arrays

13 Benchmarks

Four inheritance patterns fromCrockford’s JS: The Good Parts

68


objects prototypes

lambdastype-tests

arrays

13 Benchmarks

Array-manipulating examplesfrom SunSpider

69


objects prototypes

lambdastype-tests

arrays

13 Benchmarks

typeOf() function to replace typeoffrom Closure Compiler

70


objects prototypes

lambdastype-tests

arrays

13 Benchmarks

Well-typed programsdon’t have run-time errors

DesugaredProgram

DJSProgram

DesugarerBased on Guha et al.

[ECOOP 2010]

Implementation

JavaScript λ-Calculus + References + Prototypes

DesugaredProgram

Z3 SMTSolver

TypeChecker

DJSProgram

DesugarerBased on Guha et al.

[ECOOP 2010]

ImplementationProgrammer Chooses

Warnings or Errors

Local Type Inference

Subtyping w/o Z3 If Possible

Annotation Burden

+= ~300 LOC to start+= ~100 LOC annotations

=+ ~400 LOC total

(Improved since paper)

33% Annotation Overhead

Common Cases Simplified viaSyntactic Sugar and Local Type Inference

Performance(Improved since paper)

Total benchmark suite:

~10 seconds~1100 Z3 queries

11/13 benchmarks in 0-1 s

Common Cases Fast viaSyntactic Reasoning When Possible

75

Future Work

Syntax, Inference, Performance

Larger Examples

Type Checker in JS; Run in Browser

IDE Support for Refactoring, etc.

76

JavaScript


Types via Logic!DJS

Thanks!

77

ravichugh.com/djs

D::PS: I’m on the Job Market

78

Extra Slides

Coq

refinement types

dependent types

Expressivity

“Usability”

JS

+ nested refinements

System D[POPL ’12]

DJS

DependentJavaScript

[this paper]

syntactic types

…

occurrence types

∨, ∧

F≤

System D [POPL 2012]+ Types for JS Primitives+ Strong Updates+ Quirky JS Arrays+ Prototype Inheritance

Dependent JavaScript (DJS)

81

/*: x:NumOrBool {ite Num(x) Num(v) Bool(v)} */

function negate(x) { x = (typeof x == “number”) ? 0 – x : !x return x}

/*: x:Any {v iff falsy(x)} */

function negate(x) { x = (typeof x == “number”) ? 0 – x : !x return x}

Function Types and Objects{p} {v|p}

82

ObjHas(d,k,H,d’) has(d,k) HeapHas(H,d’,k)

/*: x:Ref / [x |-> d:Dict |> x.pro] {v iff ObjHas(d,”f”,curHeap,x.pro)} / sameHeap */

function hasF(x) { return “f” in x}

x:T1/H1 T2/H2

Function Types and Objects

output typeinput heap

input type output heap

83

ObjSel(d,k,H,d’) ite has(d,k) sel(d,k) HeapSel(H,d’,k)

x:T1/H1 T2/H2

Function Types and Objects

output typeinput heap

input type output heap

/*: x:Ref / [x |-> d:Dict |> x.pro] {v = ObjSel(d,”f”,curHeap,x.pro)} / sameHeap */

function readF(x) { return x.f}

84




return !x;

else

return 0 - x;

}

negate( )

0 - “2”// -2

“2”

Whoa, but perhaps okay…

85




return !x;

else

return 0 - x;

}

negate( )

0 - undefined// NaN

undefinedError would be nicer,

but okay…

86




return !x;

else

return 0 - x;

}

negate( )

0 - {}// NaN

{}

Seems about right…

87




return !x;

else

return 0 - x;

}

negate( )

0 - [] // 0

[]

WAT?!

negate has good intentionsBut too many corner cases in JS semantics!

88


if (duck.quack)


else




{v| sel(d,“quack”) :: Unit Str }

Function types nested inside refinements

[POPL 2012]

89

ArraysPrototypesTag-Tests Duck Typing

var x = {};

x.f;

x.f.f; Programmer configures DJS to report either

warnings or errors for:

1) Possible unbound keys

Mutable Objects

90

ArraysPrototypesTag-Tests Duck Typing

var x = {};

x.f;

x.f.f; Programmer configures DJS to report either

warnings or errors for:

1) Possible unbound keys

2) Possible run-time errors

Mutable Objects

Download - Dependent Types for JavaScript

Top Related