Type-safety in JavaScript!

Really ?

 

JS101 - Data Types

  • String
  • Number
  • Boolean
  • Object (RegExp, Array, Null, Function et.all)
  • Undefined

What is Type safety?

1

Type safety means that the compiler will validate types, and throw an error if you try to assign the wrong type to a variable.

Agenda

  1. Vulnerabilities with loose typing
  2. Viable options for Type Safety in JS
  3. TypeScript or FlowType ?
  4. Demo of a sample application

Vulnerabilities with loose typing

  • Applying an arithmetic operator
    • "5" - "3" = 2
      
    • "5" + "3" = "53"
  • Accessing a non-existent variable
  • Accessing a property of a null object
let greatestCommonDivisor = ( n, m ) =>
    n === m 
        ? n 
	: n < m 
            ? greatestCommonDivisor( n, m – n ) 
	    : greatestCommonDivisor( n - m, n ); 
greatestCommonDivisor( 24, 15 )    

// output 
// 3 
greatestCommonDivisor( “24”, “15” )    

// output 
// 3 
greatestCommonDivisor( “9”, “24” )    

// output 
// Uncaught RangeError: Maximum call stack size exceeded
let greatestCommonDivisor = ( n, m ) =>
    n === m 
        ? n 
	: n < m 
            ? greatestCommonDivisor( n, m – n ) 
	    : greatestCommonDivisor( n - m, n ); 
let greatestCommonDivisor = ( n, m ) => {

    n = Math.abs( parseInt( n, 10 ) ); 
    m = Math.abs( parseInt( m, 10 ) ); 

    return isNaN( n ) || isNaN( m ) 
        ? NaN 
        : n === m 
            ? n 
            : n < m 
                ? greatestCommonDivisor( n, m - n ) 
                : greatestCommonDivisor( n - m, n ); 

}

The Horror

Type Safety is difficult and I am not smart enough to handle it

Viable Options

  • Static Typing

  • Type Inference

Static Typing

  • Data type is known at compile time
  • Specifies possible states of an Object
  • Done using code annotations
Class Person implements t1 {
    subordinate : t1;
    constructor ( x : number ) {
 	this.money = x; 
    }
    employPerson( y : t1, ) : void { 
	this.subordinate = y;
    }
} 

t1 john = new Person( 10000 ); 
t1 paul = new Person( 1000 ); 

john.employPerson( paul );

Type Inference

  • Safety of Static type systems without Type Annotations

  • Reducing expressions to implicitly typed values

  • Easy to use ; Implementation is difficult

Non-Typed Code

Typed Code

Constraint Satisfaction Algo

TypeScript

  • Initially based on Static types, now includes type inference
  • Bootstrapped - Written using typescript
  • Superset of JS. Uses '.ts'
  • Definitely typed -more than 2500 libraries
  • Control flow check

FlowType

  • Based on Type Inference
  • OCaml - Compiles using BuckleScript
  • Just a library to check types. Uses '.js'
  • Flow Typed - fairly new
  • Minimal control flow check

vs

Demo Time

The positives

  • Type definitions
  • Community
  • Bootstrapped
  • Live Documentation
  • Intellisense 
  • Catch bugs early

The deltas

Static Types

Perceived 

Bugs

Run time 

Bugs

  • Only a subset of bugs are handled
  • One more thing to learn or train the team

Your Takeaway Menu

  • Type safety is hard
  • Handling it will reduce a lot of bugs for large teams or products 
  • Live documentation and Intellisense even for most of the popular libraries 
  • One more thing to learn

Safely Compile to

JS

Shoot your questions

 

@sbmadhav

https://github.com/sbmadhav

Typesafety in Javascript, really

By Brameshmadhav Srinivasan

Typesafety in Javascript, really

Static data typing is now a thing in Javascript. If not already should we adapt to using Static Typing? Are the likes of Flow and TypeScript the future of coding? How does React / Redux gel with Static Typing?

  • 514
Loading comments...

More from Brameshmadhav Srinivasan