[TypeScript] interface 키워드

코딩애플님의 '빠르게 마스터하는 타입스크립트' 강의를 수강한 뒤 정리를 위해 작성한 글입니다.

interface 키워드

타입스크립트는 타입 지정 시 type 키워드(type alias) 를 통해 타입을 변수처럼 담아 사용할 수 있습니다.

// 타입 별칭
type SettingCategoryProps = {
  title: string;
  list: { cate: string; data: string; isEditable: boolean }[];
  isEdit: boolean;
};

const SettingCategory = (props: SettingCategoryProps) => {
  const [isEdit, setIsEdit] = useState(false);

  return (
	...
  );
};

Object(객체) 자료일 경우에는 type 키워드가 아닌 interface 키워드로도 타입 지정이 가능합니다.

interface SettingCategoryProps  {
  title: string;
  list: { cate: string; data: string; isEditable: boolean }[];
  isEdit: boolean;
};

interface 키워드를 사용할 경우에는 등호가 필요하지 않습니다. (Class 만드는 법과 유사)

type 키워드와의 차이점

extends로 확장 가능

interface Animal{
  name: string,
  head: number,
  body: number,
}

interface Cat{
  name: string,
  head: number,
  body: number,
  leg: number,
  tail: number,
  meow: ()=>void
}

다음과 같은 interface들이 있을 때, interface Animal 의 name, head, body 속성이 interface Cat에도 중복되게 존재하는 것을 확인 할 수 있습니다.

interface Animal{
  name: string,
  head: number,
  body: number,
}

interface Cat extends Animal{
  leg: number,
  tail: number,
  meow: ()=>void
}

extends 키워드를 사용하면 class 문법과 유사하게, Animal 에 있던 속성들을 상속받아 사용할 수 있습니다. 🙂

interface Cat에 name, head, body 속성을 명시하지 않았음에도, bangul 객체에서 해당 속성을 선언했을 때 컴파일 에러가 뜨지 않는 모습입니다.

중복 선언 가능

type Animal = {
  name: string;
  head: number;
  body: number;
};

type Cat = {
  leg: number;
  tail: number;
  meow: () => void;
} & Animal;

const bangul: Cat = {
  name: 'bangul',
  head: 1,
  body: 1,
  leg: 4,
  tail: 1,
  meow: () => {
    console.log('meow');
  },
};

type 으로도 & 연산자를 이용하여 extends와 유사한 기능을 구현할 수 있습니다.

하지만 type 키워드의 경우 위와 같이 중복 선언이 불가능하고,

interface 의 경우 중복 선언이 가능하며 선언했던 interface는 덮어씌워지는 것이 아니라, 기존에 선언했던 내용에 합쳐집니다.

interface Animal{
  name: string,
  head: number,
  body: number,
}

interface Cat extends Animal{
  leg: number,
  tail: number,
  meow: ()=>void
}

interface Cat {
  color: string;
}

const bangul: Cat = {
  name: 'bangul',
  head: 1,
  body: 1,
  leg: 4,
  tail: 1,
  meow: () => {
    console.log('meow');
  },
};

위와 같이 interface Cat을 중복 선언했을 때, 처음에 선언했던 interface의 속성인 name, head, body... 를 갖고 있으면서도, 다시 선언하며 정의 해 준 color 속성도 갖고 있습니다.

interface Cat {
  color: string;
}

interface Cat {
  color: number;
}

단, 다음과 같이 동일한 속성을 다른 타입으로 재선언할 때는 에러가 발생합니다. 🥴

같은 타입으로 재선언 시엔 에러가 발생하지 않으며, 이는 type 키워드에 & 연산자를 사용했을 때도 동일합니다.

언제 interface를 사용해야 할까

타입스크립트로 작성된 외부 라이브러리를 한번이라도 보신 분은 아시겠지만, 위와 같이 interface 키워드를 많이 사용하는 편입니다.

다른 사람들이 코드를 이용하는 상황이 많으면, interface 키워드로 유연하게 타입을 지정할 수 있도록 만드는 것이 좋다고 합니다. 😉

참고자료

• https://codingapple.com/course/typescript-crash-course/ (빠르게 마스터하는 타입스크립트)