Dependent Types for JavaScript Ravi Chugh Ranjit Jhala University of California, San Diego David...

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

Date post:	14-Dec-2015
Category:	Documents
Upload:	dylan-harper
View:	217 times
Download:	0 times

Dependent Types for JavaScript Ravi Chugh Ranjit Jhala University of California, San Diego David...

Documents