• Save
Type Checking JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Type Checking JavaScript

on

  • 8,256 views

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

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

Statistics

Views

Total Views
8,256
Views on SlideShare
7,956
Embed Views
300

Actions

Likes
1
Downloads
0
Comments
0

8 Embeds 300

http://eng.wealthfront.com 175
http://eng.kaching.com 92
http://www.slideshare.net 24
http://www.linkedin.com 4
https://www.linkedin.com 2
http://209.85.135.132 1
http://wildfire.gigya.com 1
http://web.archive.org 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Type Checking JavaScript Presentation Transcript

  • 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;