type과 interface

 

 

오늘은 타입스크립트에서 사용하는 type과 interface에 대해 가볍게 알아보고 어떤 것을 사용하면 좋은지에 대해 이야기해보겠습니다. type과 interface는 개발자가 타입에 이름을 지정하여 타입을 부여하고 싶을 때 사용하는 문법입니다.

 

 

type

 

 

type Name = string;
const name: Name = '씨씨상';

 

프로그래밍에서 코드를 알아보기 쉽게 변수에 이름을 붙이듯이 특정 타입 (string) 에 특정 이름 (Name) 을 붙여주는 것입니다. 그런데 이렇게 쉬운 예제는 별로 없고 보통은 복잡한 데이터 타입에 이름을 붙여주고 싶을 때 사용합니다. 이를 타입 별칭을 만든다고 합니다.

 

type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: '씨씨상',
  age: 10,
};

사실 이것도 쉬운 예다.

 

객체 형태인 변수 person에  name, age의 타입을 선언한 타입 Person을 생성한 후 타입을 부여하였습니다. 코드 읽기는 가독성이 제일 중요하기 때문에 이런식으로 의미 있는 이름을 지어주면 훨씬 읽기가 수월합니다.

 

 

interface

 

 

한편으론 interface로도 타입을 선언할 수 있습니다. 위에서 타입으로 선언한 예제를 interface를 활용하여 다시 타입을 선언해 보겠습니다.

 

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

const person: Person = {
  name: '씨씨상',
  age: 10,
};

 

쉽죠? 다만 주의할 점이 있습니다. interface는 이렇게 객체 형태일 때 타입에 이름을 붙일 수 있고, type은 객체 형태 뿐만 아니라 모든 형태에 타입을 지정할 수 있습니다. 가장 첫 번째 예제에서 string에 타입 이름을 지어준 것 처럼 말이죠.

 

interface의 특징으로는 확장이 용이하다는 점이 있습니다.

 

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

const person: Person = {
  name: '씨씨상',
  age: 10,
  phone: '01012123434',
};

interface Person {
  phone: string;
}

 

다음과 같이 선언할 경우 interface Person에는 name, age, phone 이렇게 3가지의 속성이 들어가게 됩니다. 프로그래밍에서 변수의 선언을 생각해보면, 같은 이름의 변수에 값을 할당할 경우 덮어쓰기 되어 phone이라는 속성만이 남겠죠. 하지만 자바스크립트는 객체를 수정하는 경우가 왕왕 있으므로 타입스크립트에서 정의한 객체 타입과 달라져서 에러가 나는 일이 허다합니다. 그래서 타입을 수정해야 했고, interface가 확장되는 이유입니다.

 

그럼 객체 타입에 타입을 부여해주고 싶을 때는 type을 사용하는 것이 좋을까요, interface를 사용하는 것이 좋을까요? 사실 타입스크립트로 개발해본 사람이라면 누구나 이것에 대한 고민을 해보셨을 겁니다.

 

정답은 개발자 본인이 원하는것을 사용하면 된다는 것이지만, type 키워드로 객체 타입을 선언할 때 유니언 타입을 사용하고 클래스에 부여하거나 interface로 확장하는 경우 에러가 발생하기 때문에 주의해야 할 필요는 있습니다. (왜냐하면 클래스는 반드시 고정된 형식이어야만 해서 여러분이 하기에 따라 천사가 될 수도 있고 악마가 될 수도 있는 유니언 타입 같은 유연한 구조를 지원하지 않습니다. interface도 전체 속성을 상속받아야 해서 유니언 타입 안됨.)

 

type을 기본으로 사용하되 공통적으로 사용하는 API, 라이브러리를 작성하게 될 때는 확장이 용이하도록 interface를 사용하는 방법을 권장합니다.

 

 

 

 

 

[참고자료]

참고자료1

Interface vs Type alias in TypeScript 2.7