TypeScript: type과 Interface의 차이

서론

 TypeScript에서 type과 interface는 모두 타입을 정의하는 방식이지만, 각자 고유한 특징과 장단점을 가지고 있다. 이번 글에서는 type과 interface의 공통점과 차이점을 정리하고, 마지막에는 언제 type을 써야하고 언제 Interface를 쓰는게 적절한지에 대해 써보고자 한다.

1. 공통점

1.1 특정 필드 제외 (Omit) 기능

 type과 interface 모두 Omit 기능을 활용하여 특정 필드를 제외한 새로운 타입을 정의할 수 있다. 이 기능은 보안 등 이유로 일부 속성만 노출하고 싶을 때 유용하다. 다만, type을 사용한 경우 문법이 더 깔끔해지는 장점이 있다.

interface User {
  name: string;
  age: number;
  email: string;
}

// type, interface 모두 특정 필드를 제외 가능
type DisplayUser = Omit<User, "email" | "age">;
interface DisplayUserInterface extends Omit<User, "email" | "age"> {}

1.2 상속 및 결합 방식

 두 방식 모두 상속과 결합을 지원한다. interface는 extends 키워드를 통해 상속을 구현하고, type은 앰퍼샌드(&) 연산자를 사용하여 결합할 수 있다. 상속과 결합 기능이 공통적으로 제공되기 때문에, 특정 상황에 따라 적합한 방식을 선택하여 사용할 수 있다.

// interface 상속
interface AdminUser extends User {
  createdDate: Date;
}

// type 결합
type Admin = User & { createdDate: Date };

2. 차이점

2.1 Type

2.1.1 객체 형태에 대한 제약

 interface는 객체의 구조를 정의하는 데 특화되어 있으며, 반드시 객체 형태로만 사용할 수 있다. 반면, type은 객체뿐만 아니라 원시 타입과 결합형 타입 등 여러 형태로 선언할 수 있어 범용성이 더 높다.

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

type Name = string; // Type은 객체뿐 아니라 다른 타입에도 적용 가능

2.1.2 Union Type 지원

 type은 Union Type을 지원하여 여러 타입을 조합하거나 하나로 선언할 수 있다. 다양한 타입을 한 번에 처리해야 할 때 유용하며, interface에서는 지원되지 않는다. Union Type이 필요할 경우 type을 사용하는 것이 유리하다.

type Identifier = string | number;

2.1.3 원시 타입의 선언 가능 여부

 type은 원시 타입에 대한 선언이 가능하여, string, number, boolean 등의 타입을 직접 선언할 수 있다. 반면 interface는 오직 객체 타입 선언에 한정되어 있어, 다양한 데이터 타입을 다룰 때 type이 더 유리하다.

2.1.4 Tuple 형태 지원

 type은 Tuple 형태로 사용할 수 있는 반면, interface는 Tuple 형태를 지원하지 않는다. 이로 인해, 배열 인덱스별로 다른 타입을 지정할 필요가 있을 때는 type을 사용하는 것이 적합하다.

type UserTuple = [number, string];
const user: UserTuple = [1, "happy"];

2.2 Interface

2.2.1 선언 병합 기능

 interface는 동일한 이름으로 여러 번 선언할 수 있으며, 선언이 자동으로 병합된다. 이 기능은 특히 외부 라이브러리의 타입을 확장하거나 동일한 이름의 타입을 합쳐야 할 때 유용하다. 반면, type은 동일한 이름으로 중복 선언이 불가능하다.

interface LibraryInterface {
  name: string;
}

interface LibraryInterface {
  version: number;
}
// LibraryInterface는 name과 version을 모두 포함하게 된다.

3. 번외: 클래스와의 차이점

 interface와 클래스는 구조적 타이핑(structural typing)으로 인해 같은 타입으로 취급된다. 하지만 클래스는 타입이면서 동시에 값(value)인 반면, interface는 타입에 한정된다. TypeScript가 JavaScript로 변환될 때 interface는 코드에서 사라지지만 클래스는 남아 런타임에서도 동작한다.

 

 따라서 런타임에서 타입 검사를 해야 하는 경우 클래스가 유리하다. 예를 들어, 서버로 전송되는 데이터는 컴파일 타임에 타입 검사를 할 수 없기 때문에 런타임 검사가 필요하며, 이때 클래스와 같은 값을 활용하는 방식이 유리하다.

4. 결론

TypeScript에서 type과 interface 모두 장단점이 존재하며, 다음과 같이 상황에 따라 적절히 선택하면 된다.

 

• 인터페이스: 동일한 이름으로 선언할 수 있는 “선언 병합”이 필요한 경우 interface를 사용하는 것이 좋다. 특히 외부 라이브러리의 타입을 확장할 때 interface의 선언 병합 기능이 유용하다.

• 타입: 객체뿐만 아니라 모든 타입에 대해 선언 가능하고, Union Type을 사용할 수 있어 범용성이 더 높은 type을 사용하는 것이 좋다. 단순한 데이터 타입이나, 여러 타입을 혼합해서 사용해야 할 때는 type이 유리하다.