Typed JavaScript

what & why?

Types

{
  name: 'Jim',
  age: 29,
  beard: true,
  skills: [
    'Programming',
    'Teaching',
    /* TODO: Get some hobbies */
  ]
}

JavaScript has

Dynamic Types

Dynamic Types

let age = 29;

age = "29";

Dynamic Types

function sum(a, b) {
  return a + b;
}

sum("13", "37");

Why is this a problem?

We don't know if our code will work until we run* it

*This includes unit tests. They actually run your code.

Static Analysis

// ES6 JavaScript
const double = x => x * 2;
-- Haskell
double x = x * 2
// ES6 JavaScript
double("trouble");
-- Haskell
double "trouble"
5 == true;
5 == True

We can do better than eslint ./src --fix

What if...?

function double(x: number): number {
  return x * 2;
}
const double = (x: number): number => x * 2;

Typed JavaScript

TypeScript (Microsoft)

Flowtype (Facebook)

Comparison

 TypeScriptFlowtype
Editor supportAmazingAdequate
Error messagesIncomprehensible  Weirdly vague
On new projectsGreatGreat
On existing projects  PainfulGreat
TranspilationtscBabel Plugin

Disclaimer

I have never used TypeScript.

Adding type definitions to JavaScript helps catch many more bugs through static analysis.

Adding type definitions to JavaScript helps catch many more bugs through static analysis makes programming easier.

¢¢

Lazier Easier than writing unit tests

Documents your code

Lets you write your code faster

Makes your code run faster

Wait, what, faster?

[insert rabbithole here]

[insert rabbitbadgerhole here]

[insert rabbitbadgerhole EVIDENCE OF ANCIENT RABBIT CIVILISATION here]

Oh look, sunlight!

Questions

(About anything)

Jim O'Brien

@jimcodes

spicy.engineering