snippets.ts

// REACT
export interface HeaderProps { initial?: number }

// initial is optional, and has a default value set
// Header is of type React.SFC (stateless functional component) (see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts)
const Header: FunctionComponent<HeaderProps> = ({ initial = 5 }) => {}

// Event Handlers
// (see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6b5ceb41aafa8e41d0f99aabc910ebad5442c008/types/react/index.d.ts#L788) for types
class MyComponent extends React.Component<MyComponentProps> {
  public myHandler: React.MouseEventHandler<HTMLDivElement> = e => {}
  public render () {
    return <div onClick={this.myHandler}>Hello {this.props.name}</div>
  }
}

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any; // could also have any number of other properties. this stops 'unexpected property' errors
}
// note: this will fail if the variable does not have any common object property. color or width have to be present in the object being checked

// rule of thumb - variable = const, property = readonly
interface Point {
    readonly x: number;
    readonly y: number;
}



// FUNCTIONS
// function call signature
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    let result = source.search(subString);
    return result > -1;
}

// only type and position checked. param name does not matter
mySearch = function(src: string, sub: string): boolean {
    let result = src.search(sub);
    return result > -1;
}




// ARRAYS
// defining idnexable types
interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

// prevent reassignment
interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!




// INTERFACES
// explicitly enforcing that a class meets a particular contract
interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): void;
}

class Clock implements ClockInterface {
    currentTime: Date = new Date();
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}



// CHECKING DYNAMIC CLASS TYPE
// checks constructor signature of Class passed in
interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick(): void;
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);



// Simple class check
interface ClockConstructor {
  new (hour: number, minute: number);
}

interface ClockInterface {
  tick();
}

const Clock: ClockConstructor = class Clock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
      console.log("beep beep");
  }
}



// EXTENDING AN INTERFACE
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;