keyof & typeof 연산자

• 변수에 담긴 복잡한 객체 타입을 일일이 치기 귀찮을 때 자동으로 복사하기 용이

keyof 연산자 (Index Type Query)

typeof 연산자

인덱스드 엑세스 타입

• 객체, 배열, 튜플의 특정 요소나 속성의 타입을 추출할 때 사용
  • 대형 API 명세에서 특정 데이터 타입만 추출할 때 용이
• 객체의 프로퍼티 이름을 [] 안에 넣어 해당 타입만 획득
  • [] 에는 값이 아닌 타입을 넣어야 함
• 객체의 구조가 변경되어도 인덱싱된 타입이 자동으로 업데이트되어 유지보수

객체 프로퍼티의 타입 추출

배열 요소의 타입 추출

튜플의 요소 타입 추출

맵드 타입 (Mapped Types)

• 기존의 타입을 기반으로 새로운 타입을 일괄 생성할 때 사용
• for...in 루프와 유사한 문법을 사용하여 타입을 순회

type User = {
  id: number;
  name: string;
  age: number;
};

// 모든 속성을 옵셔널로 변경
type OptionalUser4 = {
    [K in keyof User3]?: User3[K];
}
// 결과: { id?: number; name?: string; age?: number; }

// 모든 속성을 읽기 전용으로 변경
type ReadonlyUser3 = {
    readonly[k in keyof User3]: User3[k];
}
// 결과: { readonly id: number; readonly name: string; readonly age: number; }

템플릿 리터럴 타입 (Template Literal Types)

• 문자열 타입을 조합하여 새로운 문자열 타입 생성
• 템플릿 리터럴(${}) 문법을 타입 정의에 사용
• CSS 클래스명이나 이벤트 이름(onHover, onClick) 같은 규칙적인 문자열 타입을 자동 생성에 용이

type Color2 = 'red' | 'green' | 'blue';
type Intensity = 'light' | 'dark';

// 두 유니온 타입이 조합된 새로운 문자열 타입 생성
// 결과: 'light-light' | 'light-dark' | 'dark-light' | 'dark-dark' | 'green-light' | 'green-dark'
type ColorTheme = `${Intensity}-${Color2}`;