Generics

Generic Interfaces

Generic interfaces describe object shapes that can hold different value types.

generic interface A generic interface uses a type parameter inside an object shape.

Generic Interfaces

quantity
interfaces.ts
Replay: real traced execution (multi-file project)
interface Box<T> {
    label: string;
    value: T;
}

function describeBox<T>(box: Box<T>): string {
    return `${box.label}=${box.value}`;
}

const quantity: number = 3;
const countBox: Box<number> = { label: "items", value: quantity };
const text: string = describeBox<number>(countBox);

console.log(text);

interface Box<T> {
    label: string;
    value: T;
}

function describeBox<T>(box: Box<T>): string {
    return `${box.label}=${box.value}`;
}

const quantity: number = 1;
const countBox: Box<number> = { label: "items", value: quantity };
const text: string = describeBox<number>(countBox);

console.log(text);

interface Box<T> {
    label: string;
    value: T;
}

function describeBox<T>(box: Box<T>): string {
    return `${box.label}=${box.value}`;
}

const quantity: number = 6;
const countBox: Box<number> = { label: "items", value: quantity };
const text: string = describeBox<number>(countBox);

console.log(text);

  1. quantity ← 3, countBox ← [object Object]

    7    return `${box.label}=${box.value}`;8}910const quantity→ 3: number = 3;  //@quantity=1, 611const countBox→ [object Object]: Box<number> = { label: "items", value: quantity3 };12const text: string = describeBox<number>(countBox[object Object]);

  2. function describeBox<T>(box: Box<T>): string

    3    value: T;4}56function describeBox<T>(box[object Object]: Box<T>): string {7    return `${box.labelitems}=${box.value3}`;8}

  3. text ← items=3

    10const quantity: number = 3;  //@quantity=1, 611const countBox: Box<number> = { label: "items", value: quantity };12const text→ items=3: string = describeBox<number>(countBox[object Object]);1314console.log(textitems=3);
    outputitems=3

  1. quantity ← 1, countBox ← [object Object]

    7    return `${box.label}=${box.value}`;8}910const quantity→ 1: number = 1;11const countBox→ [object Object]: Box<number> = { label: "items", value: quantity1 };12const text: string = describeBox<number>(countBox[object Object]);

  2. function describeBox<T>(box: Box<T>): string

    3    value: T;4}56function describeBox<T>(box[object Object]: Box<T>): string {7    return `${box.labelitems}=${box.value1}`;8}

  3. text ← items=1

    10const quantity: number = 1;11const countBox: Box<number> = { label: "items", value: quantity };12const text→ items=1: string = describeBox<number>(countBox[object Object]);1314console.log(textitems=1);
    outputitems=1

  1. quantity ← 6, countBox ← [object Object]

    7    return `${box.label}=${box.value}`;8}910const quantity→ 6: number = 6;11const countBox→ [object Object]: Box<number> = { label: "items", value: quantity6 };12const text: string = describeBox<number>(countBox[object Object]);

  2. function describeBox<T>(box: Box<T>): string

    3    value: T;4}56function describeBox<T>(box[object Object]: Box<T>): string {7    return `${box.labelitems}=${box.value6}`;8}

  3. text ← items=6

    10const quantity: number = 6;11const countBox: Box<number> = { label: "items", value: quantity };12const text→ items=6: string = describeBox<number>(countBox[object Object]);1314console.log(textitems=6);
    outputitems=6