Objects and Interfaces

Interfaces

Interfaces name an object shape so values and functions can share the same contract.

interface An interface describes property names and value types for an object.

Interfaces

score
interface.ts
Replay: real traced execution (multi-file project)
interface Student {
    name: string;
    score: number;
}

function describe(student: Student): string {
    return `${student.name}: ${student.score}`;
}

const score: number = 86;
const student: Student = {
    name: "Ada",
    score: score
};

const summary: string = describe(student);
console.log(summary);

interface Student {
    name: string;
    score: number;
}

function describe(student: Student): string {
    return `${student.name}: ${student.score}`;
}

const score: number = 72;
const student: Student = {
    name: "Ada",
    score: score
};

const summary: string = describe(student);
console.log(summary);

interface Student {
    name: string;
    score: number;
}

function describe(student: Student): string {
    return `${student.name}: ${student.score}`;
}

const score: number = 95;
const student: Student = {
    name: "Ada",
    score: score
};

const summary: string = describe(student);
console.log(summary);

  1. score ← 86, student ← [object Object]

    7    return `${student.name}: ${student.score}`;8}910const score→ 86: number = 86;  //@score=72, 9511const student→ [object Object]: Student = {12    name: "Ada",13    score: score8614};1516const summary: string = describe(student[object Object]);17console.log(summary);

  2. function describe(student: Student): string

    3    score: number;4}56function describe(student[object Object]: Student): string {7    return `${student.nameAda}: ${student.score86}`;8}

  3. summary ← Ada: 86

    13    score: score14};1516const summary→ Ada: 86: string = describe(student[object Object]);17console.log(summaryAda: 86);
    outputAda: 86

  1. score ← 72, student ← [object Object]

    7    return `${student.name}: ${student.score}`;8}910const score→ 72: number = 72;11const student→ [object Object]: Student = {12    name: "Ada",13    score: score7214};1516const summary: string = describe(student[object Object]);17console.log(summary);

  2. function describe(student: Student): string

    3    score: number;4}56function describe(student[object Object]: Student): string {7    return `${student.nameAda}: ${student.score72}`;8}

  3. summary ← Ada: 72

    13    score: score14};1516const summary→ Ada: 72: string = describe(student[object Object]);17console.log(summaryAda: 72);
    outputAda: 72

  1. score ← 95, student ← [object Object]

    7    return `${student.name}: ${student.score}`;8}910const score→ 95: number = 95;11const student→ [object Object]: Student = {12    name: "Ada",13    score: score9514};1516const summary: string = describe(student[object Object]);17console.log(summary);

  2. function describe(student: Student): string

    3    score: number;4}56function describe(student[object Object]: Student): string {7    return `${student.nameAda}: ${student.score95}`;8}

  3. summary ← Ada: 95

    13    score: score14};1516const summary→ Ada: 95: string = describe(student[object Object]);17console.log(summaryAda: 95);
    outputAda: 95

Match the Shape

  1. Student says which fields an object must have.
  2. student includes name and score.
  3. describe accepts the object because both fields match.
  4. The function can read student.name and student.score. | Interface field | Example value | | --- | --- | | name: string | "Ada" | | score: number | 86 |

Exercise: interface.ts

Create a Student object that matches the interface and pass it to a describe function