Javascript type systems

The good parts

1

The List.head

The List.head problem

Types in JS

    
// Should this fail type-check

function foo(): string { // returns a string type
  let arr = [];
  return arr[0];
}

Types in JS

  • NO
  • Array access is ignored in type checks
  • Or else there will be far too many type errors

Developer ergonomics

The List.head problem

2.

The null

The null

Types in JS

    


let a:string = "a string"
a = null;   // <- No type-fail in Typescript
            // <- Fails with Flow

Types in JS

  • Typescript -
    • ​null and undefined are subtypes of all types
    • Can be assigned to a variable of any type
    • Reduces type safety drastically, and kind of defeats the purpose
    • But
    • Improves ease of introduction
    • And,
      • strictNullChecks that disables this behaviour
  • ​​Flow type
    • ​No such thing. Always strict
    • Add flexibility with Maybe types

The null

Onboarding experience

3.

Structural types

Structural types

Types in JS

// Typescript here.
// Flow has similar behaviour

class A{
    x: string
}

interface B {
    x: string;
}

type C = { x: string };

let a = new A();
let b: B;
let c: C;


b = a;  // works
c = a;  // works

same shape => same type

Types in JS

  • Structural type-systems use the shape to determine type compatibility
  • The opposite is a nominal type system - where the declared name is the final decider
  • Nominal type systems are common in class based type languages - C#, Java
  • Javascript too has classes now

Structural types

Types in JS

Javascript too has classes now, so classes are nominally typed in Flow

Structural types

// only in Flow

class E {
  x: string;
}

class F {
  x: string;
}

let e1 = new E();
let f1:F = e1;   // <-- Fail

Types in JS

Flow goes a step further

Structural types

// only in Flow

type A = { x: number }

let a:A = { x: 123, y: 'abc' } // <-- Okay with Flow

Types in JS

Flow goes a step further -

It allows wider values to be assigned to an object

Structural types

// only in Flow

type A = { x: number, y: number }

let a:A = { x: 123, y: 456, z: 'abc' } // <-- Okay with Flow

let a2:A = { x: 123 } // Not okay

In fact, it allows an value of a subtype to be assigned.

Flow goes a step further -

It allows wider values to be assigned to an object

Types in JS

Structural sub-typing / Type widening

Allows an value of a subtype to be assigned.

 

Inherited classes are well known as subtypes.

Wider objects are actually sub-types of an object

 

Structural types

// Flow


class A { }

class B extends A { }

let a1:A = new B(); // <- Okay


// Same in Typescript too

Types in JS

But this is not without problems.

Type-widening and union types don't play nice together.

Structural types

// Flow

type A = { x: number }
type B = { y: number }
type C = A | B;

let c:C = { x: 1, y: 1 } // Okay
let d = c.x              // Error: x is missing in B
let e = c.y              // Error: y is missing in A






type A1 = {| x: number |}
type A2 = {| y: number |}
type C = A | B

let c:C = { x: 1, y: 2 } // Error right here

Fixed using the exact object type

4.

Covariance

Contravariance

Bivariance

Types in JS

  • Helps decides type compatibility of function types 
  • Flow:
    • Arguments:  contravariant
    • return values: covariant
  • Typescript:
    • Arguments: bivariant
    • return values: covariant
  • Flow is sound. Typescript is not

Type variance

Types in JS

Contravariance

Type-widening and union types don't play nice together.

Fixed using the exact object type

Type variance

Javascript type systems - the surprising parts

1.

The null type

The null

Types in JS

    


let a: string = "a string"
a = null;   // <- No type-fail in Typescript


function foo(x):string {
    return undefined  // <- No error. Not cool !
}

Typescript considers null  a subtype of all types.

In other words, null/undefined can be assigned to a variable of any type

 

Thankfully,

  • Flow doesn't have this problem
  • --strictNullChecks

 

The null

Types in JS

    


let a: string = "a string"
a = null;   // <- No type-fail in Typescript


function foo(x):string {
    return undefined  // <- No error. Not cool !
}

The rationale -

Ease of use.

Converting existing code bases gradually is much easier with this.

 

2.

Structural typing

javascript-type-systems-2

By Abhishek Yadav

Made with Slides.com

javascript-type-systems-2

  • 873

More from Abhishek Yadav