[TypeScript] 인터페이스(interface)란?

인터페이스(interface)란?

객체 모양의 타입을 정의할 때 유용한 문법

프레임워크(리액트, 뷰 ... 등등)에서는 주로 API 응답, 프롭스, 변수, 함수를 정의할 때 자주 사용함.

interface Person {
  name: string;
  age: number;
}

const vision: Person= {
  name: '비전',
  age: 3
};

---

인터페이스 확장(extends)

js 클래스에서 상속을 할 때 extends 키워드를 사용하는데 인터페이스에서도 사용해주면 됨.

interface Person {
   name: string;
}

interface Developer extends Person {
   skill: string;
}

let fe: Developer = { name: 'josh', skill: 'TypeScript' };

➕ 인터페이스 확장은 여러 개 extends가 가능함.

(참고로 클래스는 반드시 하나만 extends 할 수 있음)

interface Person {
   name: string;
   age: number;
}

interface Programmer {
   favoriteProgrammingLanguage: string;
}

interface Korean extends Person, Programmer { // 두개의 인터페이스를 받아 확장
   isLiveInSeoul: boolean;
}

const person: Korean = {
   name: '홍길동',
   age: 33,
   favoriteProgrammingLanguage: 'kor',
   isLiveInSeoul: true,
};

---

인터페이스 선언 병합 (interface Declararion Merging)

동일한 이름을 가진 인터페이스를 여러 번 선언하면, TypeScript가 이를 자동으로 병합하여 하나의 인터페이스로 처리하는 기능

같은 이름을 가진 인터페이스를 여러 번 선언할 수 있으며,
이 인터페이스들은 병합되어 하나의 확장된 형태로 동작.

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "Alice",
  age: 30
};

위 코드에서 User라는 인터페이스를 두 번 선언했지만, TypeScript는 이를 병합하여 name과 age 속성을 모두 가지는 하나의 User 인터페이스로 처리함.