[TS] Interface vs Type alias

🥏 Type alias

• 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.
  타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다.
  

• TypeScript의 유형 별칭은 기존 유형에 대한 새 이름을 만드는 방법이다. 기존 유형을 기반으로 하지만 다른 이름을 가진 새 유형을 정의하는 데 사용된다. 복잡한 유형을 단순화하거나 코드를 더 읽기 쉽게 만들거나 재사용 가능한 유형을 만드는 데 사용할 수 있다.

type alias 방식에서는 intersection(&)과 union(|) 연산자, 튜플 선언이 가능하다.

• (인터페이스 선언 방식에서는 사용 불가)

type Score = 'A' | 'B'| 'C' ;
// 문자열 리터럴을 사용하면 스코어 내부 값만 입력 가능

type PartialPointX = { x: number };
type PartialPointY = { y: number };

// intersection
type IntersectionPoint = PartialPointX & PartialPointY;

// union
// union 연산자를 사용한 타입의 경우에는 extends, implements 키워드 사용이 불가능
type UnionPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

• type alias는 VSCode 상에서 프리뷰 기능을 통해 해당 타입 내의 속성 정보 조회 가능
  VSCode에서 타입을 지정한 부분에 마우스 오버를 하면 해당 타입에 대한 툴팁을 조회할 수 있다.
  이 때, type alias로 선언된 타입의 경우에는 해당 타입의 전체 속성 정보를 조회할 수 있다. (interface 키워드로 선언된 타입의 경우에는 인터페이스명만 조회된다.)

🏉 Interface

TypeScript의 인터페이스는 객체의 구조와 동작을 정의한다. 인터페이스는 객체의 모양과 객체가 가져야 하는 속성 및 메서드를 정의하는 데 사용된다. 즉, 인터페이스는 객체가 따라야 하는 규칙이나 약속을 정의한다.

타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다.

-객체의 스펙(속성과 속성의 타입)
-함수의 파라미터
-함수의 스펙(파라미터, 반환 타입 등)
-배열과 객체를 접근하는 방식
-클래스

interface는 동일한 이름으로 재선언 가능

interface에서는 동일한 이름을 갖는 인터페이스를 중복하여 선언할 수 있다.
이를 선언 병합(Declaration merging)이라고 한다.
따라서, interface로 선언된 타입은 선언 이후의 타입 확장에도 용이하다.
(타입 alias는 동일한 이름의 타입을 선언하면 에러가 발생한다. 선언 이후에는 해당 타입의 내용을 변경할 수 없음을 의미한다.)

-> 한 마디로, 인터페이스는 재선언이 가능하지만 타입 별칭은 불가능.

interface는 extends 키워드를 사용하여 확장된 타입 선언 가능

인터페이스는 extends 키워드를 사용하여 명시적으로 기존 타입의 확장이 가능하다.
그럼 type alias로 선언된 타입은 extends 키워드를 사용한 확장이 불가능하다는 것일까?
아니다. 물론 type alias로 선언된 타입도 extends 키워드를 적용하여 타입 확장이 가능하다.
다만 type alias로 선언된 타입에 extends 키워드를 적용하여 새로운 type alias 타입을 선언하는 것은 불가능하다.

눈에 띄는 유효한 차이점?

• 유형 별칭과 인터페이스의 주요 차이점은 유형 별칭은 기존 유형의 새 이름을 만드는 데 사용되는 반면 인터페이스는 개체의 모양과 동작을 정의하는 데 사용된다는 점.
• 타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부이다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능하다. 따라서, 가능한한 type 보다는 interface로 선언해서 사용하는 것을 권장하고 있다고 한다.

참고자료 및 출처

• The Difference Between Type Aliases and Interfaces in TypeScript
• Typescript - type alias vs interface 방식 비교
• 타입스크립트 핸드북