Js and type safety
-
Upload
brameshmadhav-s -
Category
Technology
-
view
145 -
download
2
Transcript of Js and type safety
![Page 1: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/1.jpg)
JS and type safety
Inspired by : Type Safety for JavaScript by Ben Weber (Department of Computer Science, University of California)
![Page 2: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/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: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/3.jpg)
3
Agenda1. Vulnerabilities with loose typing
2. Viable options for Type Safety
3. A Primer on TypeScript & Flow
![Page 4: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/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: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/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: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/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: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/7.jpg)
JavaScript type safety is hard, “I’m not smart enough to handle them”.
![Page 8: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/8.jpg)
8
![Page 9: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/9.jpg)
9
• Static Typing• Type InferenceViable Options
![Page 10: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/10.jpg)
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);
![Page 11: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/11.jpg)
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
![Page 12: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/12.jpg)
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
![Page 13: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/13.jpg)
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++
![Page 14: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/14.jpg)
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
![Page 15: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/15.jpg)
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
![Page 16: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/16.jpg)
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
![Page 17: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/17.jpg)
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
![Page 18: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/18.jpg)
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
![Page 19: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/19.jpg)
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
![Page 20: Js and type safety](https://reader036.fdocuments.us/reader036/viewer/2022081605/58ef28b31a28abd43b8b458d/html5/thumbnails/20.jpg)
Its time to code in style