TypeScript

More than just a Transpiler

@basarat

(google basarat)

#TypeScript

Less Wat

What is Wat

Awwwww

WAT

JavaScript

[].asdf()

TypeError: [].asdf is not a function

JavaScript

[] + []

JavaScript

[] + []

""

JavaScript

[] + {}

JavaScript

[] + {}

"[object Object]"

JavaScript

{} + []

!= [] + {}

JavaScript

{} + []

JavaScript

{} + {}

JavaScript

{} + {}

"[object Object][object Object]"

JavaScript

{} + {}

NaN

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

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