타입스크립트 type vs interface 차이 한눈에 보기 👀
타입스크립트에서 type과 interface는 모두 타입을 정의할 때 자주 사용됩니다. 하지만 각각의 특징과 쓰임새에는 분명한 차이가 있습니다!
interface의 특징 🧩
- 객체의 구조(Shape) 확장에 특화
interface는 객체의 타입을 정의할 때 주로 사용하며, 같은 이름으로 여러 번 선언하면 자동으로 병합(Declaration Merging)되어 속성이 합쳐집니다. - 확장(extends)과 구현(implements)에 적합
클래스와 결합해서 객체지향적으로 사용하거나, 라이브러리/외부 API 타입 정의에 많이 쓰입니다. - 오직 객체 타입만 정의 가능
원시 타입(예: string, number)이나 튜플, 유니온 타입 등은 정의할 수 없습니다.
// 여러 번 선언해도 병합됨!
interface User { name: string; }
interface User { age: number; }
const user: User = { name: '홍길동', age: 20 };
type의 특징 🛠️
- 복잡한 타입 조합에 강점
튜플, 유니온(|), 인터섹션(&) 등 다양한 타입 조합을 표현할 수 있습니다. - 선언 병합 불가
같은 이름으로 여러 번 선언하면 에러가 발생합니다. - 모든 타입에 별칭 부여 가능
객체뿐 아니라, 원시 타입, 유니온 타입, 튜플 등에도 사용됩니다.
// 유니온, 인터섹션, 튜플 등 자유롭게 조합
type Fruit = 'apple' | 'banana'; type Size = 'small' | 'large';
type FruitBasket = [Fruit, Size]; const basket: FruitBasket = ['apple', 'large'];
한눈에 비교 ✨ (인터페이스 VS 타입)
선언 병합 | 가능 (자동 확장) | 불가 (중복 선언 시 에러) |
확장/상속 | extends/implements 지원 | 인터섹션(&)으로 조합 |
정의 대상 | 객체 타입만 | 모든 타입 (객체, 원시, 튜플 등) |
복잡한 조합 | 제한적 | 유니온/인터섹션/튜플 모두 가능 |
언제 써야 할까? 🤔
- 객체의 구조를 확장하거나, 라이브러리 타입을 정의할 때 → interface
- 복잡한 타입 조합, 유니온/튜플/원시 타입 등 → type
둘 다 유사하게 쓸 수 있지만, 팀/프로젝트의 스타일에 따라 적절히 선택하면 됩니다.
정리
- interface는 객체 확장에,
- type은 복잡한 타입 조합에 강점이 있습니다!
상황에 맞게 골라 쓰세요 😊
타입스크립트의 타입과 인터페이스의 차이점을 설명해주세요.
프론트엔드와 관련된 질문이에요.
interface는 객체의 형태를 확장하는 데 용이한 반면, type은 튜플, 인터섹션, 유니온 등을 이용하여 더 복잡한 타입 정의 및 조합을 표현하는 데 용이합니다.
먼저, interface는 선언 병합을 지원해 여러 번 선언할 수 있어, 주로 객체 타입을 확장할 때 유리합니다. 동일한 이름을 가진 interface를 여러 번 선언하면, 이 속성들이 자동으로 합쳐집니다. 예를 들면 다음과 같습니다.
interface Person {
age: number;
name: string;
isBirthday: boolean;
}
interface Person {
address: string;
}
const person1: Person = {
age: 1,
name: "abcd",
isBirthday: false,
address: "1010",
};
위 코드에서 Person interface를 여러 번 선언할 수 있으며, 결과적으로 하나의 interface로 병합됩니다.
반면, type으로 선언한 경우에는 동일한 이름을 중복 선언하면 에러가 발생합니다. 대신, 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",
};
정리하자면, interface는 선언 병합을 통해 여러 번 선언이 가능하여 주로 객체 타입을 확장하는 데 유리하며, type은 튜플 등 복잡한 타입을 사용하고 유연한 연산자를 통해 복잡한 타입 조합을 표현하는 데 적합합니다.
728x90
'1일 1CS(Computer Science)' 카테고리의 다른 글
시맨틱 마크업이란 무엇이며, 왜 중요한가요? (0) | 2025.05.07 |
---|---|
WAS와 웹 서버의 차이점은 무엇인가요? (0) | 2025.05.07 |
자료구조 스택에 대해서 설명해주세요. (0) | 2025.05.07 |
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점은 무엇인가요? (0) | 2025.05.07 |
자바스크립트는 싱글 스레드 언어인데, 어떻게 동시에 여러 작업들을 수행하나요? (0) | 2025.05.07 |