반응형
type과 interface는 모두 객체의 형태(shape) 를 정의하는 데 사용된다. 하지만 겉보기에는 비슷하지만, 확장성, 유연성, 표현력에서 차이가 있다. 같이 알아보자
1. 기본 문법 비교
- 선언하는 방식은 아래와 같고 둘 다 동일하게 작동한다.
// interface 선언
interface Person {
name: string;
age: number;
}
// type 선언
type Person = {
name: string;
age: number;
};
2. 확장(확장성) 방식의 차이
// interface는 extends로 확장이 가능하다.
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
// type은 & 연산자로 확장할 수 있다.
type Animal = {
name: string;
};
type Dog = Animal & {
breed: string;
};
3. 선언 병합(Declaration Merging)
// interface는 동일 이름으로 여러 번 선언하면 병합된다.
interface User {
name: string;
}
interface User {
age: number;
}
// 결과:
const u: User = {
name: '홍길동',
age: 25,
};
// type은 동일 이름으로 다시 선언하면 오류가 발생한다.
type User = {
name: string;
};
type User = {
age: number; // ❌ 에러: 중복 선언
};
4. 유니온, 인터섹션 타입 지원
// type은 유니온/인터섹션/튜플/기타 고급 타입 조합에 유리하다
type Status = 'loading' | 'success' | 'error'; // 유니온
type ID = string | number;
type Point = { x: number } & { y: number }; // 인터섹션
// interface는 이런 유니온 타입을 직접 지원하지 않으며, 인터섹션의 경우 extends를 활용하여 간접적으로 같은 효과를 사용할 수 있다.
5. 그렇다면 뭐가 좋을까?
- interface는 구조 확장에 강하고,
- type은 타입 조합과 유연한 표현에 강하다.
위에 요약과 같이 뭐가 더 좋을지는 상황에 따라 다를 거 같다. 하지만 TypeScript 팀도 공식적으로 말하길, “객체를 정의할 땐 interface부터 써보고, 부족할 때 type으로 전환하라”는 전략이 좋다고 한다.
반응형
'코딩 > TypeScript' 카테고리의 다른 글
TypeScipt - zod 라이브러리 (2) | 2024.10.17 |
---|---|
TypeScript Functions - 노마드코더 Chapter 3 (1) | 2024.07.20 |
TypeScript 작동 방법 - 노마드코더 Chapter 2 (0) | 2024.07.19 |
TypeScript 시작 - 노마드코더 Chapter 1 (0) | 2024.07.19 |