[TypeScript] 타입스크립트에서 Type vs Interface 어떤것을 써야할까?

TypeScript에서는 객체 타입을 정의하는 데 두 가지 주요한 도구가 있습니다. 인터페이스와 타입 별칭. 이들의 차이점과 사용 사례에 대해 알아보겠습니다.

 

객체 상속에는 인터페이스 사용

`TypeScript`에서 인터페이스는 다른 객체에서 확장될 수 있는 객체 타입을 정의하는 데 사용됩니다. `extends` 키워드를 사용하여 상속을 지원합니다. 객체들이 상속 관계에 있는 경우 인터페이스를 사용하는 것이 권장됩니다. 이는 인터페이스를 `extends`를 사용하여 생성하면 `TypeScript`가 해당 인터페이스를 이름별로 캐시하여 유형 검사 성능을 향상시킬 수 있기 때문입니다.

interface WithId {
  id: string;
}

interface User extends WithId {
  name: string;
}

 

유연성을 위한 타입 별칭

타입 별칭은 `type` 키워드를 사용하여 선언되며 더 유연합니다. 어떤 종류의 유형도 나타낼 수 있으며 객체 유형뿐만 아니라 다양한 유니온, 교차, 매핑 유형 및 조건부 유형을 표현할 수 있습니다.

type StringOrNumber = string | number;

type User = {
  id: string;
  name: string;
};

 

인터페이스에서의 선언 병합

인터페이스에는 `선언 병합`이라는 기능이 있습니다. 동일한 이름의 두 인터페이스가 동일한 범위에서 선언되면 그 선언은 병합됩니다. 이는 의도치 않은 동작을 야기할 수 있으므로 이에 대해 인식하지 않는 경우 예상치 못한 결과를 초래할 수 있습니다. 의도하지 않은 재선언을 방지하려면 `ESLint`의 `no-redeclare` 규칙을 활용할 수 있습니다.

 

인덱스 시그니처의 차이

타입 별칭은 암묵적으로 인덱스 시그니처를 가지고 있어서 인덱스 시그니처가 있는 유형에 할당할 수 있습니다. 그러나 인터페이스는 암묵적 인덱스 시그니처가 없습니다. 인터페이스가 인덱스 시그니처가 있는 유형에 할당 가능하도록 하려면 명시적인 인덱스 시그니처를 추가해야 합니다.

 

기본 사용 권장 사항

`TypeScript` 문서에서는 인터페이스를 기본 선택사항으로 권장하며, 필요한 경우에만 타입 별칭을 사용하도록 권장합니다. 그러나 여기서는 블로그 작성자가 반대 접근 방식을 권장합니다. 인터페이스의 선언 병합 및 암묵적 인덱스 시그니처의 특징으로 인해, 특별한 인터페이스 기능이 필요하지 않은 경우에는 타입 별칭을 기본 선택사항으로 사용하고 필요할 때에만 인터페이스를 활용하는 것을 권장합니다.

최종 정리

인터페이스와 타입 별칭 적절한 활용 방법

 

인터페이스 활용하기

객체 상속 및 확장	다른 객체로부터 속성을 상속하고 확장해야 할 때 인터페이스를 사용하세요.
상속 관계에서 성능 최적화	객체 상속 관계에서는 인터페이스를 사용하면 유형 검사 성능을 최적화할 수 있습니다.
디자인 패턴 적용	객체 간의 관계를 구조화하거나 코드를 의미적으로 표현할 때 인터페이스를 활용합니다.

 

타입 별칭 활용하기

유연한 유형 표현	다양한 유형을 표현해야 할 때 타입 별칭을 활용하세요.
유니온, 교차, 조건부 유형 등	복잡한 유형을 정의하거나 결합해야 할 때 타입 별칭이 유용합니다.
함수 시그니처 타입	함수의 형태와 인자, 반환 유형 등을 정의할 때 타입 별칭을 사용합니다.

 

사용 권장 사항

기본 선택사항	일반적인 상황에서는 타입 별칭을 기본 선택사항으로 고려하세요. 유연성과 다양한 유형 표현을 위해 활용할 수 있습니다.
인터페이스는 객체 상속에 용이	객체 간 상속 및 확장 관계를 다룰 때는 인터페이스를 활용하면 효율적입니다.
명확한 의도로 활용	코드를 더 명확하게 의미적으로 표현하려면 적절한 도구를 선택하여 활용하세요.

 

간결하게 정리하면, 인터페이스는 객체 상속 및 의미적인 구조화에, 타입 별칭은 유연한 유형 표현 및 복잡한 유형 정의에 활용됩니다. 프로젝트의 필요에 맞게 두 도구를 적절히 선택하여 사용하면 됩니다.