type safety in javascript, really ?
TRANSCRIPT
Type Safety in JavaScript, really ?
Inspired by : Type Safety for JavaScript by Ben Weber (Department of Computer Science, University of California)
2
What is type safety?
Type safety means that the compiler will validate types, and throw an error if you try to assign the wrong type to a variable.
source : what is type safety? (language agnostic)
3
Agenda1. Vulnerabilities with loose typing
2. Viable options for Type Safety
3. A Primer on TypeScript & Flow
4
Vulnerabilities with loose typing
• Applying an arithmetic operator
• Accessing a non-existent variable, and accessing a property of a null object.
> "hello " - "world” > “5”-”3” > “5”+”3”NaN 2 “53”
5
Vulnerabilities with loose typing
function greatestCommonDivisor (n, m) { if (n === m) { return n; } if (n < m) { return greatestCommonDivisor(n, m - n); } return greatestCommonDivisor(n - m, n);}
greatestCommonDivisor (“24”, “15”) 3 (number)greatestCommonDivisor (“9”, “24”) Uncaught RangeError: Maximum call stack size exceeded
6
Vulnerabilities with loose typingfunction greatestCommonDivisor (n, m) { n = Math.abs(parseInt(n, 10)); m = Math.abs(parseInt(m, 10)); if (isNaN(n) || isNaN(m)) { return NaN; ) if (n === 0) { return m; } if (m === 0) { return n; } var gcd = function (n, m) { if (n === 1 || m === 1) { return 1; } if (n === m) { return n; } if (n < m) { return gcd(n, m - n); } return gcd(n - m, n); }; return gcd(n, m);}
JavaScript type safety is hard, “I’m not smart enough to handle them”.
8
• Static Typing• Type InferenceViable Options
9
Static Typing
• Data type is known at compile time via declarations• Type Specifies possible states of an Object• Done using code annotations
function Person(x:Int):t1 { this.money = x; } function employPerson(x:t1, y:t1):t2 {
x.boss = y;} t1 john = new Person(100); t1 paul = new Person(0); employPerson(paul, john);
10
Type Inference
• Safety of Static type systems without Type Annotations• Reducing expressions to implicitly typed values, instead of
type annotations.• Easy to use ; Implementation is difficult JS is weakly typed
constraint satisfaction algorithm
Non Typed Code Typed Code
11
• ML as a spec lang for next gen JS ?
• Class-based OOP
• Name management
• Gradual typing
• Formalize type soundness for JavaScript
To the future
May the force be with you
12
Attempts at Type Safety to Java Script • TypeScript (Angular2 and NativeScript) • Flow (React)
• Dart – Ambitious google project
• ST-JS – Strongly Typed JavaScript ( Borrowing Java's syntax to write type-safe JavaScript )
• SJS - A type inferer and checker for javascript (written in haskell)
• LLJS : Low-Level JavaScript
• Transpilers! Like Cjoure script, from Python, Ruby, Scala have all been attempted
• GWT , Closure compiler , Haxe, JXS , JavaScript++
13
A primer on TypeScript & Flow
• TypeScript is a typed superset of JS compiles to JS.
• TypeScript: Static type checker, Ideal for new project. Angular2.0 community advices its use
• Has a .ts extension
• To install : npm install -g typescript
• To compile : tsc helloworld.ts
14
A primer on TypeScript & Flow
• Flow: Relies heavily on Type Inference Annotation only to bridge gaps in type inference
• Best part flow helps you catch errors involving null
• Hey its just .js ; Ideal for existing projects
• Implements gradual type system
• No Windows support yet!
• React developers advice its use
15
TypeScript in action
//In greeting.ts file :function greet(username) {
return "Hello, " + username; } var user = “World"; document.body.innerHTML = greet(user);//Now we do tsc greeting.ts greeting.js
//In greeting.ts file :function greet(username : string) {
return "Hello, " + username; } var user = “World"; document.body.innerHTML = greet(user);//Now we do tsc greeting.ts greeting.js works as expected
16
TypeScript in action
//In person.ts file :
interface Person { firstname: string; lastname: string;
} function greet(person : Person) {
return "Hello, " + person.firstname + " " + person.lastname;} var user = {firstname: "Jane", lastname: "User"}; document.body.innerHTML = greet(user);
//Now we do tsc person.ts person.js
17
Flow a brief intro
//Mac Users HomeBrew or ZIP for Linux and Mac users// $> brew install flow
//hello.js/* @flow */ function foo(x) {
return x * 10; } foo('Hello, world!');
//$> cd flow/examples/ //$> flow check
examples/ hello.js:7:5,17: string This type is incompatible with examples/ hello.js:4:10,13: number
18
Your Takeaway Menu
The lack of type safety security vulnerabilities
Static type systems offer the greatest safety but are the most restrictive.
Type inference provides the flexibility but difficult to implement.
TypeScript uses static type checking
Flow uses type inference + static type checking
Its time to code in style