Cal Belden

calvinbelden@gmail.com

@califianakis

Web Developer

at

Adage Technologies

TypeScript

An introduction

Index

1. TypeScript - what is it
2. Working with types
3. Tooling
4. Working with JavaScript libraries
5. Why we use it
6. Pain points
7. ???? QUESTIONS ????

TypeScript

A statically typed language

that compiles to JavaScript

The gist

• All ES5 is valid TypeScript
• Type annotations are optional
• Static typing provides an improved developer experience

Working with Types

Type Annotatations

var numbers : number[] = [1, 2, 3, 4];


// Implicit type: string[]
var strings = numbers.map(toString);


function toString(n : number) {
    return n.toString()
}

Type Annotatations

var numbers : number[] = [1, 2, 3, 4];


// Implicit type: string[]
var strings = numbers.map(toString);


function toString(n : number) {
    return n.toString()
}

Modules

• ES6 module syntax

• Every *.ts file is its own module by default

// todo-helpers.ts

import * as _ from 'lodash';
import { Todo } from './classes/todo';


export function completeTodos(todos: Todo[]) {
    return todos.filter(t => _.assign(t, { complete: true }));
};

Classes

class Stack<T> {
    _list: T[];

    constructor() {
        this._list = [];
    }

    pop() : T {
        return this._list.pop();
    }

    push(item : T) {
        this._list.push(item);
    }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop();
//>> 2

Interfaces

import * as React from 'react';


interface IEventProps {
    id: string;
    name: string;
    description: string;
}


export class Event extends React.Component<IEventProps, any> {
    render() {
        const url = `/events/${this.props.id}`;

        return (
        <div className="event">
            <a href={url}>{this.props.name}</a>
            <div>{this.props.description}</div>
        </div>
        );
    }
}


const events = (window as any).bootstrap.events as IEvent[];
const eventListNode = document.getElementById('js-event-list');

ReactDOM.render(<EventList events={events} />, eventListNode);

Working with types

• Modules are great for organizing your code
• Classes closely follow the ES6 spec WITH strong, static types!
• Interfaces are great for assigning types to "dumb" data (I use these a lot)

Tooling

Tooling

• Plugins for several IDEs
• Autocomplete, goto definition, error highlighting
• Compilation occurs during file saves
• Can customize output
  • specify module format
  • specify target (ES5, ES6, etc)

Working with JavaScript Libraries

Working with libraries

Working with third party libraries requires installation of a type definition file that describes the library's API.

Its possible to use libraries without installing a type definition file; however, this can be awkward.

Type Definition Project

https://github.com/DefinitelyTyped

Working with Libraries

DEMO

Why we use it

Why we use it

• Static type checking prevents an entire class of annoying bugs
• Auto-completion
• Abstraction over JS allows us to easily change module formats / reuse code

Pain Points

Pain Points

• Type definitions can mismatch the actual JavaScript API
• Importing is occasionally broken/finnicky: depends on your module loader and the JavaScript libraries you're attempting to import
• Tooling can be a bit buggy
• Adds another dev tool to your already complicated project

We like it, and we're gonna keep using it

Questions