Making video games with TypeScript

BrooklynJS (June 2016)

This Talk

• What's Manygolf
• What's TypeScript
• Some things I used TypeScript for
• How you can try TypeScript

many.golf

TypeScript!

Static Typing

function multiply(a, b) {
  return a * b;
}

const one = 1;
const two = 'two';

const three = multiply(one, two); // NaN!

Static Typing

function multiply(a: number, b: number): number {
  return a * b;
}

const one = 1;
const two = 'two';

const three = multiply(one, two); // Still NaN!

app.ts(8,29): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Static Typing

interface Person {
  firstName: string;
  lastName: string;
}

const thomas: Person = {
  firstName: 'Thomas',
  lastName: 'Boyt',
};

Static Typing

interface Person {
  firstName: string;
  lastName: string;
}

const thomas: Person = {
  firstName: 'Thomas',
  middleName: 'Albert',
  lastName: 'Boyt',
};

slides.ts (8,3): Type '{ firstName: string; middleName: string; lastName: string; }' is not assignable to type 'Person'.

  Object literal may only specify known properties, and 'middleName' does not exist in type 'Person'. (2322)

Static Typing

interface Person {
  names: string[];
}

const me: Person = {
  names: ['thomas', 'boyt'],
};

// firstName is inferred to be string
const firstName = me.names[0];

Ok,

but why?

Canvas API

• Tricky to remember!
• Lots of functions with a bunch of anonymous parameters

Autocomplete

Physics!

• Manygolf uses a library called p2.js, which has its own official type definitions
• Makes it easier to discover API
• Sample code (physics.ts)

Type Definitions!

Messaging Protocol

• Define a "message schema" once in TypeScript, use in both client and server
• Can't send type information over the wire, but can just cast a message to a specific type based on a key (e.g. {"type": "playerSwing"})
• Sample code (protocol.ts)

Protocol Message

Protocol Message

Type Definitions

• Modules written in JS can have type definitions that annotate the API
• Some modules ship definitions in their NPM package (Redux, Immutable)
• Others have third-party definitions on DefinitelyTyped
• TypeScript 2 will let you install type defs through NPM

Give TypeScript a try!

• Relatively easy to add to new projects
• 2.0 version shipping soon with improvements making it easier to get started
• Build integration: Gulp, Webpack, Rollup...
• Editor integration: VIM, Atom, VS Code
• TypeScript Playground: https://www.typescriptlang.org/play/

Give making games a try!

• Use technology you feel comfortable with
  • For me: Redux, canvas, custom event loop
  • For you: ???
• But don't feel like you have to roll everything yourself!
  • Math libraries, physics engines
  • Frameworks for games
    • Tiny: Coquette.js 
    • Big: Phaser, Crafty
    • Non-JS to web: Unity, Construct 2, Game Maker

Thank You!