Less Wat

What is Wat

Awwwww

WAT

JavaScript

[].asdf()

TypeError: [].asdf is not a function

JavaScript

[] + []

JavaScript

[] + []

""

JavaScript

[] + {}

JavaScript

[] + {}

"[object Object]"

JavaScript

{} + []

JavaScript

{} + []

 0 

JavaScript

{} + {}

JavaScript

{} + {}

"[object Object][object Object]"

V8

JavaScript

{} + {}

NaN

IE

JavaScript

"hello " + 1

Hello 1

JavaScript

"hello " + (-1)

Hello -1

JavaScript

"hello " - 1

JavaScript

NaN

"hello " - 1

But we can lint this

"hello" - 1

Can we lint this

function add(a,b){ return a+b }

add([], {})

Can we lint this

function add(a,b){ return a+b }

add(foo, bar)

Can we lint this

let foo = getFoo();
let bar = getBar();

someModule.add(foo,bar);

Linter on Steroids

JavaScript

let foo = [] + []
let bar = {} + []
let baz = [] + {}
let qux = {} + {}
let tix = "" - 123

TypeScript

Transpiler

Quick Example

node.on('click', function() {
  console.log('clicked!');
})

Quick Example

node.on('click', () => {
  console.log('clicked!');
})

node.on('click', function() {
  console.log('clicked!');
})

Transpiled

Another Example

var funcs = [];
// create a bunch of functions
for (var i = 0; i < 3; i++) {
    funcs.push(function() {
        console.log(i);
    })
}
// call them
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Another Example

const funcs = [];
// create a bunch of functions
for (let i = 0; i < 3; i++) { // Note the use of let
    funcs.push(function() {
        console.log(i);
    })
}
// call them
for (let j = 0; j < 3; j++) {
    funcs[j]();
}

But we won't need transpilation soon

The GAP

JavaScript

in

Specification

JavaScript

that run in user's

Browsers

The Bridge

JavaScript

in

Specification

JavaScript

that run in user's

Browsers

Static

vs. 

Dynamic

Testing Claim

But I have tests

Fact

You can never provide good documentation without mentioning the types

Example

function leftPad (str, len, ch) {

Just JavaScript

function add() {
  return arguments[0] + arguments[1];
}

Just JavaScript

function add(num1, num2) {
  return num1 + num2;
}

Just TypeScript

function add(num1, num2) {
  return num1 + num2;
}

The TypeScript Type System is Optional

Just TypeScript

function add(num1: number, num2: number) {
  return num1 + num2;
}

The type annotation is a theorem

and

the function body is the proof

Conventions Claim

conventions are more powerful and less obtrusive than types

Conventions

People's name should be called `displayName`

People have a `userId`

Conventions

type Person = {
  displayName: string,
  userId: string,
}

function logName(person: Person) {
  console.log(person.displayName)
}

Types For Developer

Convenience

over 

Soundness

Conventional TypeSystems

Tell me or I will not let you

Conventional TypeSystems

class ThrowItAll
{
    void show() throws Exception
    {
        throw new Exception("turtles");
    }

    void show2() throws Exception  // Why throws is necessary here ?
    {
        show();
    }

    void show3() throws Exception  // Why throws is necessary here ?
    {
        show2();
    }

    public static void main(String s[]) throws Exception  // Why throws is necessary here ?
    {
        ThrowItAll o1 = new ThrowItAll();
        o1.show3();
    }
}

TypeScript's

TypeSystem

Infer as much as possible.

If we can't infer it ... that's okay too

TypeScript's

TypeSystem

let foo = 123;


// .... later


foo.toPrecision(3); // FINE

Can move completely out of your way

TypeScript's

TypeSystem

let foo: any;
foo = 123;
foo = "Hello world"; 


// .... later


foo.toPrecision(3); // FINE

`any`

You Drive

Structural Type System

TypeScript's

TypeSystem

interface IFoo {
  name: string;
}

interface IBar {
  name : string;
}

let foo:IFoo = { name: "hello" };
let bar:IBar = { name: "world" };

foo = bar = foo

TypeScript's

TypeSystem

interface IFoo {
  name: string;
}

interface IBar {
  name : string;
}

let foo = { name: "hello" };
let bar = { name: "world" };

foo = bar = foo; // FINE

Demo

https://github.com/basarat/demo-shipping

alm.tools

npm install alm -g

Website : alm.tools