타입스크립트에서 type과 interface의 차이점과 사용 시기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

• 타겟: 타입스크립트를 사용하는 프론트엔드 개발자, API 설계자, React 프로젝트 참여자
• 난이도: 중급 이상 (타입스크립트의 핵심 개념과 패턴 이해 필요)

핵심 요약

• type은 유니언/교차 타입, 매핑 타입 등 복잡한 타입 로직에 적합하며, interface는 인터페이스 병합과 클래스 계약 정의에 강점이 있음
• interface는 공용 API 정의 또는 React props 설계 시 선호됨
• type은 원시 타입 별칭, 튜플, 복잡한 타입 조합에 적합함

섹션별 세부 요약

1. 기본 개념 설명

• type은 원시 타입, 유니언, 교차 타입, 객체 구조 정의 가능
• interface는 객체 구조 정의에 특화되며, 인터페이스 병합 기능 지원

1. 기능 비교

• type은 유니언/교차 타입 지원, interface는 인터페이스 병합 지원
• interface는 클래스 확장 가능, type은 & 연산자로 확장 가능

1. 사용 시기 가이드라인

• interface 사용 시:

- 객체/클래스의 구조 정의

- 공용 API 또는 React props 설계

• type 사용 시:

- 유니언/교차 타입 필요 시

- 복잡한 타입 로직 구현 시

1. 코드 예시

• type 예시:

```ts

type Admin = User & { role: 'admin'; };

```

• interface 예시:

```ts

interface IAdmin extends IUser { role: 'admin'; }

```

결론

• type과 interface의 선택은 프로젝트 요구사항에 따라 달라짐
• 공용 API/React props는 interface를, 복잡한 타입 조합은 type을 사용하는 것이 좋음
• 인터페이스 병합 기능이 필요한 경우 interface를, 유니언/교차 타입이 필요한 경우 type을 사용
• 실무 적용 팁:

- interface로 정의한 타입은 여러 파일에서 확장 가능

- type은 매핑 타입(Mapped Types) 구현 시 유리

- React에서는 interface가 더 널리 사용되지만, type도 가능

- 튜토리얼 영상을 통해 시각적 예제를 확인 가능 (링크: https://youtu.be/bctjOHMLT-g)