Classes

Implementing Interfaces

A class can implement an interface to promise it has specific methods.

implements `implements` asks TypeScript to check that a class satisfies an interface.

Implementing Interfaces

value
implements.ts
Replay: real traced execution (multi-file project)
interface Formatter {
    format(value: number): string;
}

class PercentFormatter implements Formatter {
    format(value: number): string {
        return `${value}%`;
    }
}

const value: number = 80;
const formatter: Formatter = new PercentFormatter();
const text: string = formatter.format(value);

console.log(text);

interface Formatter {
    format(value: number): string;
}

class PercentFormatter implements Formatter {
    format(value: number): string {
        return `${value}%`;
    }
}

const value: number = 45;
const formatter: Formatter = new PercentFormatter();
const text: string = formatter.format(value);

console.log(text);

interface Formatter {
    format(value: number): string;
}

class PercentFormatter implements Formatter {
    format(value: number): string {
        return `${value}%`;
    }
}

const value: number = 100;
const formatter: Formatter = new PercentFormatter();
const text: string = formatter.format(value);

console.log(text);

  1. value ← 80, formatter ← [object Object]

    8    }9}1011const value→ 80: number = 80;  //@value=45, 10012const formatter→ [object Object]: Formatter = new PercentFormatter();13const text: string = formatter[object Object].format(value80);

  2. format(value: number): string

    5class PercentFormatter implements Formatter {6    format(value80: number): string {7        return `${value80}%`;8    }

  3. text ← 80%

    11const value: number = 80;  //@value=45, 10012const formatter: Formatter = new PercentFormatter();13const text→ 80%: string = formatter[object Object].format(value80);1415console.log(text80%);
    output80%

  1. value ← 45, formatter ← [object Object]

    8    }9}1011const value→ 45: number = 45;12const formatter→ [object Object]: Formatter = new PercentFormatter();13const text: string = formatter[object Object].format(value45);

  2. format(value: number): string

    5class PercentFormatter implements Formatter {6    format(value45: number): string {7        return `${value45}%`;8    }

  3. text ← 45%

    11const value: number = 45;12const formatter: Formatter = new PercentFormatter();13const text→ 45%: string = formatter[object Object].format(value45);1415console.log(text45%);
    output45%

  1. value ← 100, formatter ← [object Object]

    8    }9}1011const value→ 100: number = 100;12const formatter→ [object Object]: Formatter = new PercentFormatter();13const text: string = formatter[object Object].format(value100);

  2. format(value: number): string

    5class PercentFormatter implements Formatter {6    format(value100: number): string {7        return `${value100}%`;8    }

  3. text ← 100%

    11const value: number = 100;12const formatter: Formatter = new PercentFormatter();13const text→ 100%: string = formatter[object Object].format(value100);1415console.log(text100%);
    output100%

Follow the Formatter

  1. value starts at 80.
  2. PercentFormatter.format(value) receives 80.
  3. The method adds a percent sign to the value.
  4. text becomes 80%.
  5. The program prints 80%. | value | formatted text | | --- | --- | | 45 | 45% | | 80 | 80% | | 100 | 100% |

Exercise: implements.ts

Reproduce 80%, then use values 45 and 100 to predict each formatted text.