올리브영 테크블로그올리브영 타입스크립트로 알아보는 제네릭과 매개변수 다형성
올리브영이 TypeScript 제네릭을 도입해 동일 로직의 반복 함수 3개를 1개로 통합하고 API 응답 타입 중복을 제거
AI 요약
Context
올리브영 서비스에서 Product, Review, Order 등 서로 다른 타입들에 동일한 로직(목록의 첫 번째 요소 추출)을 적용해야 했으나, 서브타입 관계가 없어 함수를 각각 3개 작성해야 했습니다. 또한 모든 API 응답이 동일한 구조(data, status, message)를 가지고 있음에도 ProductResponse, UserResponse, OrderResponse 등 응답 타입을 개별적으로 정의해야 했습니다.
Technical Solution
- 타입 변수 T를 사용한 제네릭 함수 구현:
function getFirst<T>(items: T[]): T | undefined로 Product, Review, Order 타입의 배열에 동일하게 적용 - 제네릭 인터페이스 생성:
interface ApiResponse<T>를 정의해 모든 API 응답 타입을ApiResponse<Product>,ApiResponse<User>형태로 통합 - 타입 인자 추론(Type Argument Inference) 활용: 컴파일러가 배열의 실제 타입에서 T를 자동으로 추론하여 명시적 타입 선언 제거
- 제네릭 제약(Generic Constraints) 적용:
function getLength<T extends HasLength>(arg: T)로 특정 속성이 있는 타입만 제약 - Utility Types 활성화: Partial, Pick<T, K>, Omit<T, K>를 활용해 조건부 타입 생성
Impact
아티클에는 정량적 성능 수치(지연시간 감소, 처리량 증가 등)가 명시되지 않았습니다.
Key Takeaway
제네릭은 서브타입 관계 없는 완전히 독립적인 타입들에도 동일 로직을 적용할 수 있으며, any 타입과 달리 함수를 통과해도 타입 정보가 보존되어 타입 안전성을 유지합니다. 실무에서 API 응답 구조 같은 반복되는 타입 정의를 하나의 제네릭으로 통합하면 새로운 도메인 추가 시 기존 구현을 재사용할 수 있습니다.
실천 포인트
TypeScript를 사용하는 프로젝트에서 여러 타입에 동일한 로직을 적용해야 할 때, 각 타입별 함수를 따로 만드는 대신 제네릭 함수를 사용하면 코드 중복을 제거하면서도 컴파일 시점의 타입 검사를 유지할 수 있습니다. 특히 API 응답 처리, 목록 조작 유틸리티(filter, map, find) 등 도메인별로 반복되는 데이터 구조에 제네릭 인터페이스를 적용하면 변경 시 한 곳만 수정해 모든 타입에 일괄 적용할 수 있습니다.