타입스크립트 제네릭으로 재사용 가능한 코드 만들기

타입스크립트 제네릭 이해: 재사용 가능한 코드의 궁극적인 가이드

카테고리

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

서브카테고리

웹 개발

대상자

타입스크립트를 사용하는 개발자, 특히 제네릭 개념을 처음 접하는 초보자 및 중급 개발자

핵심 요약

  • 제네릭(Generics)은 T와 같은 유형 플레이스홀더를 사용해 다양한 데이터 타입에 대한 재사용 가능한 컴포넌트를 생성할 수 있음
  • Storage와 같은 제네릭 클래스는 타입 안전성을 유지하면서도 다양한 자료형에 유연하게 적용 가능
  • extends를 사용해 타입 제한 조건을 설정할 수 있어, .length와 같은 특정 속성을 가진 객체만 허용 가능

섹션별 세부 요약

1. 제네릭의 필요성

  • 중복 코드 문제 해결: returnStringreturnNumber 같은 별도 함수 대신 returnValue 하나로 모든 타입 처리
  • 타입 안전성 유지: returnValue("Hello")처럼 타입 명시로 오류 방지

2. 제네릭 함수 예시

  • function returnValue(value: T): T
  • console.log(returnValue(123))123 출력
  • 동적 타입 처리: 함수가 여러 타입에 대응 가능

3. 제네릭 클래스: Storage

  • class Storage { private item: T; }
  • const stringStorage = new Storage(); → 문자열 저장 및 검색
  • 타입 인TEGRITY 보장: 숫자를 문자열 컨테이너에 저장하는 오류 방지

4. 제네릭 인터페이스: User

  • interface User { id: number; data: T; }
  • const user1: User = { id: 1, data: "Admin" } → 문자열 데이터 사용
  • 다양한 타입 지원: 배열, 객체 등 모든 타입에 적용 가능

5. 제네릭 타입 제한: extends 사용

  • function getLength(item: T): number
  • 정확한 타입 필터링: .length 속성 있는 값만 허용 (예: 문자열, 배열, 객체)

결론

  • 제네릭 사용 시 팁: extends로 타입 제한을 명시하고, Storage와 같은 제네릭 클래스로 코드 재사용성 향상
  • 실무 적용: 함수 및 클래스에서 T, U 등의 제네릭 타입 사용으로 중복 코드 최소화 및 유지보수성 증가