인터페이스

개요

이전에 공부했던 타입 별칭과 매우 비슷한 방식으로 진행 됩니다.
오직 객체에서만 사용됩니다.

interface Point {
  x: number;
  y: number;
}

const pt: Point = { x: 123, y: 1234 };

readonly와 선택적 인터페이스, 메서드

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

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

readonly 를 사용해서 값을 변경할 수 없게 만들 수 있습니다.
?: 를 작성하면 선택적 인터페이스로 작동합니다. 값이 없어도 에러를 발생하지 않습니다.

// sayHi: () => string;
sayHi(): string; sayHi라는 메서드는 문자열을 반환 합니다.

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

const shoes: Product = {
  name: "Blue Suede Shoes",
  price: 100,
  applyDiscount(amount: number) {
    const newPrice = this.price * (1 - amount);
    this.price = newPrice;
    return this.price;
  },
};

console.log(shoes.applyDiscount(0.4));

discount : number 이 부분을 통해 파라미터의 type을 정의해줍니다.

인터페이스 re opening

// Re-opening an interface:
interface Dog {
  name: string;
  age: number;
}

interface Dog {
  breed: string;
  bark(): string;
}

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

인터페이스를 두번 선언해준 것을 볼 수 있습니다. 결과적으로 이런경우 두개의 인터페이스는 합쳐지게 되며 적용시, 두 인터페이스 모두 적용 됩니다.

인터페이스 확장

// Extending multiple interfaces
interface Engineer extends Human, Employee {
  level: string;
  languages: string[];
}

const pierre: Engineer = {
  name: "Pierre",
  id: 123897,
  email: "pierre@gmail.com",
  level: "senior",
  languages: ["JS", "Python"],
};

인터페이스 vs 타입 별칭

• 인터페이스는 객체에만 가능하다
• 인터페이스는 re open을 활용할 수 있다.