올리브영 타입스크립트로 알아보는 타입과 타입 시스템

Context

올리브영 프론트엔드는 뷰티 상품, W CARE 서비스, 라이브 방송, 매거진 등 도메인이 다양해지면서 다루어야 할 값, 자료구조, API 응답의 복잡도가 증가했습니다. 개발자가 수많은 값과 함수의 타입, 그리고 그 흐름을 모두 기억하기 어려워져 예측하지 못한 런타임 에러와 버그가 발생하는 문제가 있었습니다.

Technical Solution

• 타입 검사기 도입: 타입 시스템을 통해 값, 자료구조, API 응답에 대한 타입 정보를 받아 정적 분석 수행
• 컴파일 단계 에러 검출: 타입 검사기가 코드 실행 전 타입 모순을 검출하여 브라우저 환경의 런타임 에러 사전 방지
• 개발자 생산성 지원: 자동완성 기능 제공 및 정의되지 않은 타입 추론으로 코드 작성 지원
• 복잡한 구조 검사 전략: 환원주의적 접근으로 단순한 원시타입부터 검사를 시작한 후 객체, 배열, 함수 등 복잡한 자료구조로 확장하며 타입 검사 수행
• 다형성을 통한 타입 유연성: 서브타입 관계(Subtyping)를 정의하여 타입 간 대입 가능성을 허용하고 코드 재사용성 증대
• 함수 타입의 공변성/반공변성 원리 적용: 매개변수 타입의 서브타입 관계를 뒤집고 반환 타입의 서브타입 관계는 유지하여 함수 호환성 보장

Key Takeaway

타입스크립트의 타입 검사는 복잡한 프로그램을 단순한 부품부터 계층적으로 검증하는 환원주의 원리에 기반하며, 서브타입에 의한 다형성을 통해 타입 안전성을 유지하면서도 코드 재사용성을 확보할 수 있습니다.