1.
Type Checking JavaScript
Pascal-Louis Perez (pascal@kaching.com) - Closure Compiler

2.
What is Type Checking?
• A particular kind of code analysis
• Looks at the flow of values
• Groups values as types
• Abstract interpretation to propagate types
• Can be dynamic or static

3.
Dynamic Type Checking
Java
Object[] objects = new Integer[1];
objects[0] = new Double(4.3);
Object o = new Integer(6);
Date d = (Date) o;
JavaScript
new 3
null.getName();

4.
Static Type Checking
3 7
a + b
10

5.
Static Type Checking
3 7 ‘a’ 7
a + b a + b
10 ‘a7’

6.
Static Type Checking
3 7 ‘a’ 7 3 null
a + b a + b a + b
10 ‘a7’ 3

7.
Static Type Checking
3 7 ‘a’ 7 3 null ‘3’ null
a + b a + b a + b a + b
10 ‘a7’ 3 ‘3null’

8.
Static Type Checking
3 7 ‘a’ 7 3 null ‘3’ null
a + b a + b a + b a + b ...
10 ‘a7’ 3 ‘3null’

9.
Static Type Checking
3 7 ‘a’ 7 3 null ‘3’ null number number
a + b a + b a + b a + b ... a + b
10 ‘a7’ 3 ‘3null’ number

10.
Motivating Example: Correctness
function(opt_i) {
/** @type number */
var index = opt_i === null ? 0 : opt_i;
...
}
• Meaningless or useless operations (such as null == null, undefined.foo)
• Wrong number of arguments for methods
• ...

11.
Motivating Example: Optimizations
• Function Inlining
• Dead Code
• Constant Folding
...
Foo.prototype.get() = function() { return 5 }
Bar.prototype.get() = function() { return 2 }
...
v.get();

12.
JavaScript Types
null
boolean
number
Object
string
undefined

13.
JavaScript Types
null
Error
boolean
number
Object
string
undefined

14.
JavaScript Types
null
Error
SyntaxError
boolean
number
Object
string
undefined

15.
JavaScript Types
null
Error
SyntaxError
boolean
number
Object
string
(boolean,string)
undefined

16.
Optionality and Nullability
• JavaScript has two unit types null and undefined
• Thanks to union types, we can make the type system understand optionality
and nullability
• Optionality: optional type T = (T, undefined)
• Nullability: nullable type T = (T, null)

17.
Closure Compiler assumptions
• Functions and methods are not changed at runtime
• Protoypes are not changed at runtime, i.e. the type hierarchy is fixed
• Functions are called statically or not (but not both)
• eval is used in a non disruptive way
• no use of with

18.
Closure Compiler assumptions
• Functions and methods are not changed at runtime
• Protoypes are not changed at runtime, i.e. the type hierarchy is fixed
• Functions are called statically or not (but not both)
• eval is used in a non disruptive way
• no use of with
clean programming

19.
Variables
/** @type number */
var n = 4;
/** @type {Array.<string>} */
var a = [‘hello’, ‘Zurich’];

20.
Properties
/** ... */
function Foo() {
/** @type {string?}
this.bar = null;
}
/** @type {boolean|undefined} */
Foo.prototype.default = true;

21.
Enums
/** @enum */
var options = {
GOOD: 0, BAD: 1
}
/** @enum {string} */
var airports = {
SFO: ‘San Francisco’, ...
}
/** @type {airports} */
var local = airports.SFO;

22.
Functions
/**
* @param {String} s
* @return string
*/
function cast(s) {
return String(s);
}

23.
Constructors
/**
* ...
* @constructor
*/
function MyObject(...) {
...
}
new MyObject();

24.
This
/**
* @this Foo
*/
function handler(...) {
...
this.bar
...
}

25.
Type Refinement
• Unlike other language, the type of a variable depends on the program point
/** @type {string?} */
var s = ...;
if (s) {
...
} else {
...
}

26.
Type Refinement
• Unlike other language, the type of a variable depends on the program point
/** @type {string?} */
var s = ...;
if (s) {
... s : string
} else {
...
}

27.
Type Refinement
• Unlike other language, the type of a variable depends on the program point
/** @type {string?} */
var s = ...;
if (s) {
... s : string
} else {
... s : (sting,null)
}

28.
Type Refinement
• Semantic based
• variable == null, variable === undefined, variable < 7, etc.
• Pattern based
• goog.isDef(variable), goog.isNull(variable),
goog.isDefAndNotNull(variable)

29.
Type Inference
• Find the type of an expression without requiring any annotation
var goog = {};
goog.FOO = 5;
/** @type number */
goog.BAR = goog.FOO + 12;