타입스크립트를 사용하면서 아직 타입스크립트에 대한 이해가 부족하다고 느껴 "우아한 타입스크립트 with 리액트" 서적을 사서 공부하고 있다. 마침 티스토리에서 오블완 챌린지를 시작하기도 했고 오늘부터 3주간 챌린지에 참여하면서 타입스크립트 공부 일지를 작성해 볼 생각이다.
타입을 선언할 때 type, interface 어떤 것을 사용해야 할까?
1. type 키워드의 특징과 사용 사례
type은 타입에 대한 별칭을 만들어주는 기능을 합니다. 다음과 같은 경우에 유용하게 사용할 수 있습니다.
- 간단한 객체나 유니온 타입, 교차 타입: type은 유니온(|)이나 교차(&)와 같은 복잡한 타입 조합을 처리할 때 편리합니다.
- 프리미티브 타입 정의: 특정 값이 제한된 타입이 필요할 때 유용합니다. 예를 들어, type Color = 'red' | 'blue' | 'green';와 같이 사용하여 특정 값으로만 이루어진 타입을 정의할 수 있습니다.
- 유틸리티 타입: Record와 같은 유틸리티 타입을 조합하거나 특정 값을 제한할 때 type을 활용하여 더 명확한 타입 추론이 가능하도록 설정할 수 있습니다.
예시
type Point = { x: number; y: number };
type Color = 'red' | 'green' | 'blue';
type Response = Success | Error;
2. interface 키워드의 특징과 사용 사례
interface는 객체의 구조를 선언하는 데 특화되어 있으며, 확장이 가능하다는 점에서 장점을 가집니다. 특히, 프로젝트가 커지고 타입 간의 일관성을 유지해야 하는 경우에 유리합니다.
- 확장성: interface는 다른 인터페이스를 확장할 수 있으며, 이를 통해 기존 타입을 바탕으로 새로운 타입을 정의할 수 있습니다. 이는 컴포넌트 간에 일관성을 유지하면서, 타입을 유연하게 확장할 수 있도록 도와줍니다.
- 객체 지향적 타입 정의: 클래스 기반 객체 지향 패턴을 사용할 때, implements 키워드와 함께 사용하여 객체 타입을 강제할 수 있습니다.
- 반복 사용이 용이한 객체 타입: 여러 곳에서 사용해야 하는 복잡한 객체 타입을 정의할 때 interface가 더 가독성이 좋고 확장 가능하여 팀에서 선호되는 경우가 많습니다.
예시
interface User {
id: number;
name: string;
}
interface Admin extends User {
role: string;
}
3. type vs interface 선택 가이드라인
두 키워드를 선택할 때 도움이 될 수 있는 가이드라인을 정리해 보았습니다.
- 간단한 타입 정의: 유니온 타입이나 특정 값의 제한이 필요한 경우, type을 사용하는 것이 좋습니다.
- 확장 가능성이 높은 객체 타입: 여러 객체에서 공유되는 속성이나 일관성이 필요한 타입 정의가 필요할 때, interface를 사용하는 것이 더 적합합니다.
- 유틸리티 타입 조합: Record와 같은 유틸리티 타입을 활용하여 특정 속성을 정의하거나 제한할 때는 type이 편리합니다.
4. 예외적으로 type과 interface를 함께 사용하는 경우
팀에 따라 type과 interface를 혼용하여 사용하는 경우도 있습니다. 예를 들어, 기본적인 객체 형태는 interface로 정의하되, 고정된 유니온 타입을 정의할 때는 type을 사용하는 식입니다. 이 방식은 코드의 일관성을 유지하면서도, 타입 선언의 유연성을 확보할 수 있게 합니다.
결론
타입스크립트에서 type과 interface를 선택할 때는 각 키워드의 특징과 프로젝트의 요구사항을 고려하는 것이 중요합니다. 간단하고 고정된 타입을 정의해야 할 때는 type을, 확장성과 일관성이 중요한 객체 타입을 정의할 때는 interface를 사용하는 것이 일반적인 가이드입니다. 그러나, 팀의 스타일이나 코드베이스의 일관성을 위해 둘 중 하나를 더 선호하는 방향으로 결정할 수도 있습니다.
중요한 것은, 두 키워드 모두 상황에 맞게 적절히 활용하여 프로젝트의 타입 정의를 일관되고 명확하게 유지하는 것입니다.
'TypeScript' 카테고리의 다른 글
TypeScript의 Array타입에 대해 알아보자 (+ Tuple타입) (0) | 2024.11.11 |
---|---|
TypeScript의 any 와 unknown을 제대로 사용하는 법 (1) | 2024.11.08 |
TypeScript 2일차 / TypeScript 문법을 뿌셔보자 ( 열거형, 인터페이스 ,타입 별칭) (0) | 2023.05.31 |
TypeScript 1일차 / TypeScript 기초를 뿌셔보자 ! (0) | 2023.05.30 |