Interface

java 로 개발할 때에는 많이 썼었는데, Node.js 를 사용하고 나서는 javascript 를 사용하느라 별로 사용하지 않았던 interface .. 하지만 typscript로 바꾸면서 다시 등장하니 반가웠다

• 인터페이스는 클래스랑 비슷하지만 용도가 다르다
• 음 주로 상호간의 정의한 약속 또는 규칙을 의미하는데, 프로퍼티나 메소드를 따로 구현 하여 일관성을 유지 하게 하는 것이다
• 인터페이스는 인터페이스로부터만 상속이 가능하다!
• class 에서 상속을 받을 때에는 implement 이용하여 구현한다.
• 개발 시간을 단축시키고(수정이 있을 때에도 인터페이스에서 한번에 수정이 가능), 표준화가 가능하다!
• 다중상속이 가능하다!
  • 하지만, 상속 받는 인터페이스들이 동일하지 않으면 에러가 발생
  • 슈퍼타입과 서브타입간 동일 속성의 타입을 맞춰주면 다중 상속이 가능하다.
• 조금 더 공부해보아야 알겠지만,,, Intersection Type 을 써서 맞추는 것도 나쁘지 않아 보인다

intersection Type 예제

interface Paid {
  type: string;
}

interface Webtoon {
  title: string;
  episode: number;
}

type PaidWebtoon =  Paid & Webtoon;

const Trace: PaidWebtoon = {
  title: "trace",
  episode: 1,
  type: "rent",
}; // ✅ OK

• 유료 웹툰 타입을 만들어 보았다. Paid 와 Webtoon 을 & 으로 평가하면 모든 속성이 들어가게 된다.
• 타입을 겹치게 하면?

interface Paid {
  type: string;
}

interface Webtoon {
  title: string;
  episode: number;
  type: number;
}

type PaidWebtoon = Paid & Webtoon;

const Trace: PaidWebtoon = {
  title: "trace",
  episode: 1,
  type: "rent", // ❌ ERROR - Type 'string' is not assignable to type 'never'.
};

• Paid 의 type 은 string 이고, Webtoon 의 type 은 number 이다.
• PaidWebtoon 의 type 은 string & number 가 되므로, 결국 never 가 된다 스투링과 남바에 교집합? never
• 겹치지 않게 잘 만들어서 사용해보자!

optional

• 인터페이스에 정의된 내용을 사용하지않으면 사용하지않는다고 typscript가 에러를 뱉어준다
• 그래서 인터페이스에는 옵션 설정이 따로 있다! 필요에 따라 사용하고 싶을 수도 있기 때문에 속성 뒤에 ? 를 붙이면 옵션이 설정된다.

interface TestInterface{
    name: string;
    age?: number;
}

class TestClass implements test{
    name: string;
}

참고 : 카카오…fe