TypeScript - Using Generics In Interfaces

This tutorials shows how to use generics with different uses of interfaces in TypeScript.

Interfaces describing Object properties

interface Pair<F, S> {
    first: F;
    second: S;
}

let p : Pair<String, number> = {first: "10K", second: 1000};
console.log(p);

Output

{ first: '10K', second: 1000 }

With functions:

interface Command<T, R> {
    id: T;
    run(): R;
}

let c: Command<String, number> = {
    id: Math.random().toString(36),
    run: function () {
        return 3;
    }
};

console.log(c.id);
console.log(c.run());

Output

0.aeni3okdiig
3

Interfaces describing functions

interface ElementChecker {
    <T>(items: T[], toBeChecked: T, atIndex: number): boolean;
}

function checkElementAt<T>(elements: T[], toBeChecked: T, atIndex: number): boolean {
    return elements[atIndex] == toBeChecked;
}

let checker: ElementChecker = checkElementAt;
let items = [1,3,5,7];
let b: boolean = checker<number>(items, 5,1);
console.log(b);
let b2: boolean = checker<number>(items, 5,2);
console.log(b2);

Output

false
true

Interfaces describing indexables

interface States<R> {
    [state: string]: R;
}

let s: States<boolean> = {'enabled': true, 'maximized':false};
console.log(s);
console.log(s['maximized']);

Output

{ enabled: true, maximized: false }
false

interface Pair<F, S> {
    first: F;
    second: S;
}

interface States<F, S> {
    [state: string]: Pair<F, S>;
}

let s: States<number, boolean> =
    {'enabled': {first: 1, second: true}, 'maximized': {first: 2, second: false}};
console.log(s);
console.log(s['maximized']);

Output

{ enabled: { first: 1, second: true },
  maximized: { first: 2, second: false } }
{ first: 2, second: false }

OOPs style interfaces

Classes implementing generic interfaces:

interface Collection<T> {
    add(t: T): void;
    remove(t: T): void;
    asArray(): T[];
}

class List<T> implements Collection<T> {
    private data: T[] = [];

    add(t: T): void {
        this.data.push(t);
    }

    remove(t: T): void {
        let index = this.data.indexOf(t);
        if (index > -1) {
            this.data.splice(index, 1);
        }
    }

    asArray(): T[] {
        return this.data;
    }
}

class BoolList extends List<boolean>{}

let numbers: Collection<number> = new List();
numbers.add(11);
numbers.add(12);
numbers.add(13);
numbers.remove(12);
let numArray = numbers.asArray();
console.log(numArray);

let boolList: BoolList = new BoolList();
boolList.add(true);
boolList.add(false);
console.log(boolList.asArray());

Output

[ 11, 13 ]
[ true, false ]

Interface extending generic interfaces:

interface Collection<T> {
    add(t: T): void;
    remove(t: T): void;
    asArray(): T[];
}

interface List<T> extends Collection<T>{
    getElementAt(index: number): T;
}

class ArrayList<T> implements List<T> {
    private data: T[] = [];

    add(t: T): void {
        this.data.push(t);
    }

    remove(t: T): void {
        let index = this.data.indexOf(t);
        if (index > -1) {
            this.data.splice(index, 1);
        }
    }

    asArray(): T[] {
        return this.data;
    }

    getElementAt(index: number): T {
        return this.data[index];
    }
}


let numbers: List<Number> = new ArrayList();
numbers.add(11);
numbers.add(13);
let numArray = numbers.asArray();
console.log(numArray);
let secondElement = numbers.getElementAt(1);
console.log(secondElement);

Output

[ 11, 13 ]
13

Example Project

Dependencies and Technologies Used:

• TypeScript 3.1.1