우아한 타입스크립트 with 리액트 요약 정리 — 3. 고급 타입

📖 이 글은 타입스크립트 스터디를 진행하면서 우아한 타입스크립트 with 리액트의 타입 내용을 정리한 글입니다.
핵심 개념, 느낀 점 등을 간단하게 정리했습니다.

 

✅ 한눈에 보는 핵심 요약

• 타입스크립트만의 타입 시스템
• 심화된 타입 검사

 

📌 주요 개념 정리

• 독자적 타입 시스템
  • any 타입
    • 어떤 타입이든 매핑할 수 있어 모든 값을 오류 없이 받을 수 있음 (never 타입 제외).
    • 개발 단계에서 임시로 값을 지정하거나, 값을 예측할 수 없을 때 사용되지만 가급적 사용 지양.
  • unknown 타입
    • 타입스크립트 3.0에 추가됨.
    • any처럼 모든 타입의 값을 받을 수 있지만, 다른 타입 변수에는 할당할 수 없음.
    • 구조를 알 수 없는 데이터를 다룰 때 any 대신 사용을 권장.
  • void 타입
    • 함수의 반환 타입으로 사용됨.
    • void 타입 변수에는 undefined 또는 null만 할당 가능.
  • never 타입
    • 값을 반환할 수 없는 타입.
    • 예외를 던지거나 무한 루프 등의 상황에서 사용됨.
  • Array 타입
    • 자바스크립트에서는 객체지만, 타입스크립트에서는 타입 지정을 위해 특수 문법을 사용.
    • 배열과 튜플을 모두 지원함. 

      구분	배열 (Array)	튜플 (Tuple)
      타입	동일	각 위치마다 다름
      길이	유동적	고정
      용도	같은 성격의 데이터 목록	정해진 구조의 데이터 묶음
      예시	string[]	[string, number]

  • enum (열거형) 타입
    • 구조화된 상수를 정의하는 타입 시스템.
    • 각각의 멤버를 가지며, 명시적으로 값을 할당할 수 있음.
    • 주로 문자열 상수 집합을 정의할 때 사용됨.
    • 숫자로만 구성되거나 타입스크립트가 자동 추론한 열거형은 안전하지 않음.
• 타입 조합
  • 교차 타입 (Intersection)
    • 여러 타입을 결합해 하나의 타입으로 만들 수 있음.
    • & 기호를 사용하여 표기함.
    • 서로 다른 타입의 특성을 동시에 가지는 객체를 만들 때 유용함.
  • 유니온 타입 (Union)
    • 둘 이상의 타입 중 하나가 될 수 있는 타입.
    • | 기호를 사용하여 표기함.
  • 인덱스 시그니처 (Index Signatures)
    • 속성 이름은 알 수 없지만, 값의 타입을 알고 있을 때 사용.
    • 예: [key: string]: number
  • 인덱스 엑세스 타입 (Index Access Types)
    • 다른 타입의 특정 속성이 가지는 타입을 조회할 수 있음.
    • 예: type NameType = Person["name"]
  • 맵드 타입 (Mapped Types)
    • 기존 타입을 기반으로 새로운 타입을 선언할 수 있음.
    • as 키워드를 사용해 키 이름 변경도 가능.
    • 예: type Readonly<T> = { readonly [P in keyof T]: T[P] }
  • 템플릿 리터럴 타입 (Template Literal Types)
    • 문자열 리터럴을 조합해 타입을 만들 수 있음.
    • 예: type Hello =hello_${string};
  • 제네릭 (Generic)
    • 다양한 타입 간 재사용성을 높이기 위한 문법.
    • 타입을 변수처럼 사용하여 외부에서 타입을 지정할 수 있음.
• 제네릭 사용법
  • 함수의 제네릭
    • 함수의 매개변수나 반환값에 다양한 타입을 넣고 싶을 때 사용.
    • 예:

        function identity<T>(arg: T): T {
          return arg;
        }

  • 호출 시그니처의 제네릭
    • 함수 타입 정의 시 제네릭을 사용하는 방식.
    • 예:

        type GenericFunction<T> = (arg: T) => T;

  • 제네릭 클래스
    • 클래스 내부에서 다양한 타입을 다룰 수 있게 해줌.
    • 예:

        class Box<T> {
          content: T;
          constructor(value: T) {
            this.content = value;
          }
        }

  • 제한된 제네릭 (Generic Constraints)
    • 제네릭 타입에 특정 조건을 제한할 수 있음.
    • extends 키워드를 사용함.
    • 예:

        function logLength<T extends { length: number }>(item: T) {
          console.log(item.length);
        }

  • 확장된 제네릭 (Generic with extends & keyof)
    • 기존 타입을 기반으로 키를 추출하거나 특정 속성에만 제약을 걸 수 있음.
    • 예:

        function getProperty<T, K extends keyof T>(obj: T, key: K) {
          return obj[key];
        }

 

📎 용어 정리

용어	설명
튜플 (Tuple)	고정된 개수와 타입을 가진 배열 형태. 각 위치마다 타입이 다를 수 있음.
옵셔널 (Optional)	객체의 속성이나 함수 인자의 선택적 사용을 나타내는 타입. ?로 표시함.
void	반환값이 없는 함수에 사용하는 타입.
never	절대 반환되지 않는 함수의 반환 타입.
enum	상수값의 집합을 정의할 때 사용하는 타입.

 

🧠 이 장에서 얻은 인사이트

• any보다 unknown을 사용하는 습관을 들이는 것이 타입 안정성에 도움이 된다.
• 제네릭의 사용법에 대해 아직 이해가 덜 되었지만, 상당히 유용해보인다.