type safety in javascript, really ?
TRANSCRIPT
![Page 1: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/1.jpg)
Type Safety in JavaScript, really ?
Inspired by : Type Safety for JavaScript by Ben Weber (Department of Computer Science, University of California)
![Page 2: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/2.jpg)
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)
![Page 3: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/3.jpg)
3
Agenda1. Vulnerabilities with loose typing
2. Viable options for Type Safety
3. A Primer on TypeScript & Flow
![Page 4: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/4.jpg)
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”
![Page 5: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/5.jpg)
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
![Page 6: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/6.jpg)
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);}
![Page 7: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/7.jpg)
JavaScript type safety is hard, “I’m not smart enough to handle them”.
![Page 8: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/8.jpg)
8
• Static Typing• Type InferenceViable Options
![Page 9: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/9.jpg)
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);
![Page 10: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/10.jpg)
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
![Page 11: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/11.jpg)
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
![Page 12: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/12.jpg)
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++
![Page 13: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/13.jpg)
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
![Page 14: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/14.jpg)
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
![Page 15: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/15.jpg)
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
![Page 16: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/16.jpg)
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
![Page 17: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/17.jpg)
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
![Page 18: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/18.jpg)
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
![Page 19: Type Safety in JavaScript, really ?](https://reader035.vdocuments.us/reader035/viewer/2022062503/58ef28cc1a28abd43b8b45c3/html5/thumbnails/19.jpg)
Its time to code in style