[타입스크립트] type과 interface의 차이

 

타입스크립트로 처음 프로젝트를 하면서 새로운 데이터 타입을 정의해야할때 보통 type 혹은 interface를 사용하게 된다.

그리고 사람마다 type과 interface를 쓰는 빈도가 조금씩 다른 경우도 있는 것 같다.

그래서 이 글에서는 이 둘의 차이점과 자바로 프로그래밍에 입문한 사람의 관점에서 이 둘을 사용하는 경향에 대해서 다뤄보고자 한다.

 

type

타입은 키워드에서 느껴지듯이 타입스크립트에서 새로운 데이터 타입을 정의할때 많이 사용하게 되는 문법이다.

type Person = {
  name: string;
};

type User = Person & {
  age: number;
};

const user: User = {
  name: "Andrew",
  age: 27,
};

 

이런식으로 Person이라는 데이터타입을 정의하고, User는 Person 타입을 기반으로 & 키워드를 이용함으로서 데이터 타입을 확장할 수 있다. 여기서 &는 extend와 키워드와 같은 기능을 한다. 

그리고 type 키워드는 또 몇가지 주요한 특징이 있는데, 원시자료형에 대해서도 정의가 가능하다는 것, 유니온(Union)타입, 그리고 같은 이름으로 재선언이 불가능하다는 것이다.

type Person = string;

type Status = "success" | "error" | "loading"; // 유니온 타입 예시

 

물론 첫번째 예시처럼 사용할 경우가 많이 있을까 싶기는 하지만 아무튼 type은 굉장히 유연하다는 것이다.

그리고 뒤에서도 설명하겠지만 interface와는 달리 같은 이름으로 재선언을 막아놓음으로서 협업 시 코드의 명확성을 보다 높여줄 수 있다고 생각한다.

유니온 타입은 type에서만 사용할 수 있는 기능은 아니지만 복잡한 객체타입을 정의할때 주로 사용하게 되는 interface보다는 위 예시처럼 간단한 상태(?)정도를 나타내는 용도로서 더 많이 사용하는 경향이 크다고 생각한다.

 

interface 

interface는 타입스크립트에서 새로운 데이터 타입, 즉 객체(Object type)의 데이터에 이름을 붙일때 주로 사용하게 되는 문법이다.

그리고 type과 비교했을때 두드러지는 차이점은 원시자료형(Primitive type)에 대해 정의하는것이 불가능하다는 것이다.

즉, 이런식으로 정의가 안된다는 것이다.

interace User = string; // 이거 안됨

 

또 다른 차이점은 interface는 재선언시 병합이 된다는 것이다.

interface User {
  id: number;
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  id: 1,
  name: "Andrew",
  age: 27,
};

 

해당 예시처럼 최종적으로 두 User 인터페이스는 합쳐진 형태로 저장이 된다.

그래서 user 변수를 User 타입으로 선언했을때 저 세가지 속성중 하나라도 빠지게 되면 에러가 발생한다.

이러한 기능이 있기에 나중에 인터페이스를 쉽게 확장할 수 있다는 장점도 있지만, 개인적으로 협업시에는 오히려 불편한 점이 될수도 있다고 생각한다.

예를 들어, 나는 User 타입을 에서 age 속성은 넣고 싶지 않은데, 다른 사람이 똑같은 이름으로 User를 저런식으로 정의해놓으면 의도치 않게 병합이 되어 개발자가 본래 의도한 것과 다른 결과물을 낳을 수도 있기 때문이다.

물론 이를 방지하기 위해 네임스페이스라는 기능이 있기는 하지만 아직까지 활발하게 사용해보지는 않았기에 이 부분에 대해서는 말을 아끼도록 하겠다..

 

결론

아직 회사를 다녀보지는 않았지만, 주변에서 타입스크립트를 사용하는 프로젝트때 보면 일반적으로 특정한 객체타입을 선언할 때는 interface를 더 많이 사용하는 것 같고, 그보다 단순한 타입을 정의할때는 type을 더 많이 사용하는 경향이 큰 것 같다.

예를 들어, 특정 컴포넌트안에 들어가는 props 타입을 정의하거나 그런 상황에는 interface를 더 많이 사용하는 것 같다.

이것에 대해 딱히 뭔가 기술적으로 납득할만한 그런 이유가 있는 것은 아니고, Java같은 객체지향 베이스의 언어로 프로그래밍을 시작해서 인지 구조를 만들때 사용하는 interface라는 키워드가 더 와닿아서 그런 것 같다.

생각보다 객체지향에 익숙한 사고방식을 지닌 사람들이 이런 맥락으로 interface와 type을 사용하는 경우가 많은 것 같다.

하지만 공부를 하다보니 typescript라는 이름에 걸맞게 type은 interface보다 강력하다는 느낌을 받는다.

예를 들어, Omit 같은걸 사용할때 문법이 더 간결한 것도 있고, 원시 자료형만 담을 수 있기도 하고, 암튼 더 유연한 것 같다.

앞으로는 편식하지말고 type도 많이 사용해보도록 해야겠다는 생각이 든다.