JS and type safety

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

9

• Static Typing• Type InferenceViable Options

10

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

11

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

12

• 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

13

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++

14

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

15

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

16

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

17

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

18

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

19

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