Type Checking JavaScript
2 likes1,979 views
The document discusses type checking in JavaScript, explaining both dynamic and static type checking methods, and their implications for code correctness and optimization. It emphasizes the nature of JavaScript types, including nullable and optional types, alongside the assumptions made by the Closure Compiler related to function and method behavior. The document also covers techniques such as type refinement, type inference, and clean programming practices in JavaScript.
![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();](https://image.slidesharecdn.com/jstypecheckupdated20091114-091114065859-phpapp02/85/Type-Checking-JavaScript-3-320.jpg)
![Variables
/** @type number */
var n = 4;
/** @type {Array.<string>} */
var a = [‘hello’, ‘Zurich’];](https://image.slidesharecdn.com/jstypecheckupdated20091114-091114065859-phpapp02/85/Type-Checking-JavaScript-19-320.jpg)
Type Checking JavaScript
- 1. Type Checking JavaScript Pascal-Louis Perez ([email protected]) - 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;