Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Type Checking JavaScript
Pascal-Louis Perez (pascal@kaching.com) - Closure Compiler
What is Type Checking?

• A particular kind of code analysis


• Looks at the flow of values


• Groups values as types


•...
Dynamic Type Checking

Java
Object[] objects = new Integer[1];
objects[0] = new Double(4.3);

Object o = new Integer(6);
D...
Static Type Checking


 3        7


  a + b




     10
Static Type Checking


 3        7   ‘a’   7


  a + b        a + b




     10        ‘a7’
Static Type Checking


 3        7   ‘a’   7   3   null


  a + b        a + b    a + b




     10        ‘a7’         3
Static Type Checking


 3        7   ‘a’   7   3   null ‘3’ null


  a + b        a + b    a + b     a + b




     10    ...
Static Type Checking


 3        7   ‘a’   7   3   null ‘3’ null


  a + b        a + b    a + b     a + b     ...

     1...
Static Type Checking


 3        7   ‘a’   7   3   null ‘3’ null         number   number


  a + b        a + b    a + b  ...
Motivating Example: Correctness

function(opt_i) {
  /** @type number */
  var index = opt_i === null ? 0 : opt_i;
  ...
}...
Motivating Example: Optimizations

• Function Inlining


• Dead Code


• Constant Folding



...
Foo.prototype.get() = fun...
JavaScript Types


                         null



                         boolean
       number

                      ...
JavaScript Types


                         null
                                      Error


                         bo...
JavaScript Types


                         null
                                      Error

                            ...
JavaScript Types


                          null
                                       Error

                          ...
Optionality and Nullability

• JavaScript has two unit types null and undefined


• Thanks to union types, we can make the...
Closure Compiler assumptions

• Functions and methods are not changed at runtime


• Protoypes are not changed at runtime,...
Closure Compiler assumptions

• Functions and methods are not changed at runtime


• Protoypes are not changed at runtime,...
Variables



/** @type number */
var n = 4;

/** @type {Array.<string>} */
var a = [‘hello’, ‘Zurich’];
Properties



/** ... */
function Foo() {
  /** @type {string?}
  this.bar = null;
}

/** @type {boolean|undefined} */
Foo...
Enums

/** @enum */
var options = {
  GOOD: 0, BAD: 1
}

/** @enum {string} */
var airports = {
  SFO: ‘San Francisco’, .....
Functions



/**
  * @param {String} s
  * @return string
  */
function cast(s) {
   return String(s);
}
Constructors


/**
  * ...
  * @constructor
  */
function MyObject(...) {
   ...
}

new MyObject();
This


/**
  * @this Foo
  */
function handler(...) {
   ...
   this.bar
   ...
}
Type Refinement

• Unlike other language, the type of a variable depends on the program point



     /** @type {string?} *...
Type Refinement

• Unlike other language, the type of a variable depends on the program point



     /** @type {string?} *...
Type Refinement

• Unlike other language, the type of a variable depends on the program point



     /** @type {string?} *...
Type Refinement

• Semantic based

  • variable == null, variable === undefined, variable < 7,   etc.


• Pattern based

  ...
Type Inference

• Find the type of an expression without requiring any annotation



 var goog = {};

 goog.FOO = 5;

 /**...
Upcoming SlideShare
Loading in …5
×

Type Checking JavaScript

7,068 views

Published on

A high-level overview of the Closure Compiler's type system, type checking and type system capabilities. For a full description http://code.google.com/closure/compiler/docs/js-for-compiler.html

Published in: Technology
  • Be the first to comment

Type Checking JavaScript

  1. 1. Type Checking JavaScript Pascal-Louis Perez (pascal@kaching.com) - Closure Compiler
  2. 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. 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. 4. Static Type Checking 3 7 a + b 10
  5. 5. Static Type Checking 3 7 ‘a’ 7 a + b a + b 10 ‘a7’
  6. 6. Static Type Checking 3 7 ‘a’ 7 3 null a + b a + b a + b 10 ‘a7’ 3
  7. 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. 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. 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. 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. 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. 12. JavaScript Types null boolean number Object string undefined
  13. 13. JavaScript Types null Error boolean number Object string undefined
  14. 14. JavaScript Types null Error SyntaxError boolean number Object string undefined
  15. 15. JavaScript Types null Error SyntaxError boolean number Object string (boolean,string) undefined
  16. 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. 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. 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. 19. Variables /** @type number */ var n = 4; /** @type {Array.<string>} */ var a = [‘hello’, ‘Zurich’];
  20. 20. Properties /** ... */ function Foo() { /** @type {string?} this.bar = null; } /** @type {boolean|undefined} */ Foo.prototype.default = true;
  21. 21. Enums /** @enum */ var options = { GOOD: 0, BAD: 1 } /** @enum {string} */ var airports = { SFO: ‘San Francisco’, ... } /** @type {airports} */ var local = airports.SFO;
  22. 22. Functions /** * @param {String} s * @return string */ function cast(s) { return String(s); }
  23. 23. Constructors /** * ... * @constructor */ function MyObject(...) { ... } new MyObject();
  24. 24. This /** * @this Foo */ function handler(...) { ... this.bar ... }
  25. 25. Type Refinement • Unlike other language, the type of a variable depends on the program point /** @type {string?} */ var s = ...; if (s) { ... } else { ... }
  26. 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. 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. 28. Type Refinement • Semantic based • variable == null, variable === undefined, variable < 7, etc. • Pattern based • goog.isDef(variable), goog.isNull(variable), goog.isDefAndNotNull(variable)
  29. 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;

×