반응형
TypeScript를 사용하면서 가장 자주 접하게 되는 개념 중 하나가 바로 타입 정의입니다. 특히 interface
와 type
은 비슷해 보이지만 각각의 특징과 사용 사례가 다릅니다. 이 글에서는 두 개념의 차이점을 명확히 이해하고, 어떤 상황에서 어떤 것을 사용해야 하는지 알아보겠습니다.
1. interface와 type의 기본 개념
interface란?
interface
는 객체의 구조를 정의하는 TypeScript의 핵심 기능입니다. 주로 객체의 형태를 확장하는 데 용이하며, 선언 병합(Declaration Merging)을 지원합니다.
interface Person {
age: number;
name: string;
isBirthday: boolean;
}
interface Person {
address: string;
}
const person1: Person = {
age: 1,
name: "abcd",
isBirthday: false,
address: "1010",
};
type이란?
type
은 더 유연한 타입 정의가 가능하며, 튜플, 인터섹션, 유니온 등 다양한 타입 조합을 표현할 수 있습니다.
type BasicInfo = {
name: string;
age: number;
};
type ContactInfo = {
email: string;
phone: string;
};
// 인터섹션 타입 (&)을 사용해 두 타입을 결합
type PersonInfo = BasicInfo & ContactInfo;
const person2: PersonInfo = {
name: "John",
age: 30,
email: "john@example.com",
phone: "123-456-7890",
};
2. 주요 차이점 비교
특징 | interface | type |
---|---|---|
선언 병합 | 지원 | 미지원 |
확장성 | extends 키워드로 확장 | 인터섹션(&)으로 확장 |
유니온 타입 | 직접 지원하지 않음 | 지원 |
튜플 타입 | 직접 지원하지 않음 | 지원 |
원시 타입 | 직접 지원하지 않음 | 지원 |
3. 언제 무엇을 사용해야 할까?
interface를 사용해야 할 때
- 객체의 구조를 정의할 때
- 선언 병합이 필요한 경우
- 클래스 구현이 필요한 경우
- API나 라이브러리의 타입 정의를 작성할 때
type을 사용해야 할 때
- 유니온 타입이 필요한 경우
- 튜플 타입이 필요한 경우
- 원시 타입의 별칭이 필요한 경우
- 복잡한 타입 조합이 필요한 경우
4. 실무에서의 활용 팁
- 일관성 유지: 프로젝트에서 한 가지 방식을 선택하고 일관되게 사용하세요.
- 확장성 고려: 향후 확장 가능성이 높은 타입은
interface
를 사용하는 것이 좋습니다. - 복잡한 타입: 복잡한 타입 조합이 필요한 경우
type
을 사용하세요. - 성능: 두 방식 모두 컴파일 시점에 제거되므로 성능 차이는 없습니다.
5. 결론
interface
와 type
은 각각의 장단점이 있으며, 상황에 맞게 적절히 선택하여 사용해야 합니다. 일반적으로 객체 타입을 정의할 때는 interface
를, 복잡한 타입 조합이 필요할 때는 type
을 사용하는 것이 좋습니다. 중요한 것은 프로젝트의 일관성을 유지하는 것입니다.
핵심 인사이트
interface
는 확장성과 재사용성이 높습니다.type
은 더 유연한 타입 조합이 가능합니다.- 두 방식 모두 TypeScript의 타입 시스템을 강력하게 만드는 중요한 도구입니다.
참고 자료
반응형
'Frontend Development' 카테고리의 다른 글
CSS Flexbox vs Grid: 현대 웹 레이아웃의 두 가지 접근 방식 (0) | 2025.05.27 |
---|---|
JavaScript의 undefined와 null: 그 차이점과 사용법 (0) | 2025.05.27 |
서버 사이드 렌더링(SSR): 현대 웹의 렌더링 전략 (2) | 2025.05.27 |
웹 성능 최적화: 이미지 로딩 속도 개선 전략 (0) | 2025.05.27 |
프론트엔드에서의 낙관적 업데이트(Optimistic update): 사용자 경험을 향상시키는 전략 (0) | 2025.05.27 |