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 = getServerFoo();
let bar = getServerBar();

someModule.add(foo,bar);

Linter on Steroids

JavaScript

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

TypeScript

What is

Just JavaScript

Linter

+

Transpiler

=

Why 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

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

// 3 , 3 , 3

Another Example

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

// 3 , 3 , 3

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]();
}

Another Example

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

// 0 , 1 , 2

But we won't need transpilation soon

The GAP

JavaScript

still in

Specification

JavaScript

that run in user's

Browsers

The Bridge

JavaScript

in

Specification

JavaScript

that run in user's

Browsers

The Linter

Types

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;
}

The TypeScript Type System is Optional

Just TypeScript

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

Just TypeScript

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

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)
}

TypeScript really is Different

Types For JavaScript Developer

Convenience

over 

Soundness

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

let foo = 123;


// .... later


foo.toPrecision(3); // FINE

`any`

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

type Model = {
  name: string;
}

type ViewModel = {
  name : string;
}

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

foo = bar = foo; // FINE

Will it outlive my project lifetime?

Most likely outlive your project framework

Syntax Debate

CoffeeScript

DART

PureScript

way too many Foo -> JS languages

Comparison

let foo: number = 123; 
foo = "hello";

Babel

TypeScript

Its all about that Linting

jQuery

React

CodeMirror

your favorite lib

Essentially Documentation

that can be used by IDEs

Moment.js

Redux

IMMUTABLE

Demo JavaScript

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

Key Takeaway

alm.tools

npm install alm -g

Website : alm.tools

TypeScript

Deep Dive