Please enable JavaScript.

Coggle requires JavaScript to display documents.

9.1: Interfaces - Coggle Diagram

9.1: Interfaces

property types

interface PointOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}

readonly properties

interface SomeType {
  readonly prop: string;
}

function doSomething(obj: SomeType) {
  // We can read from 'obj.prop'.
  console.log(`prop has the value '${obj.prop}'.`);

  // But we can't re-assign it.
  obj.prop = "hello";
}

methods

interface Person {
  readonly id: number;
  first: string;
  last: string;
  nickname?: string;
  sayHi: () => string;
}

create a variable

const thomas: Person = {
  first: "Thomas",
  last: "Hardy",
  nickname: "Tom",
  id: 21837,
  sayHi: () => {
    return "Hello!";
  },
};

alternative syntax

interface Person {
  .
  .
  .
  sayHi(): string;
}

parameters

interface Product {
  name: string;
  price: number;
  applyDiscount(discount: number): number;
}

reopening

interface Dog {
  name: string;
  age: number;
}
... some time later, add...
interface Dog {
  breed: string;
  bark(): string;
}

const elton: Dog = {
  name: "Elton",
  age: 0.5,
  breed: "Australian Shepherd",
  bark() {
    return "WOOF WOOF!";
  },
};