💟 [3장] 인덱스드 엑세스 타입 예제 오류 제보~!

const metaData: MetadataProps = {
	author: "연우",
	createdAt: 2024-06-06,
	chapter: 3,
	description: "인덱스드 엑세스 타입 예제 오류 제보~!"
	}
	
const { chapter, description } = metaData;

3.2.4 인덱스트 엑세스 타입(p.101) 예제에 오류가 있는 것 같아 제보합니다~! 그런데 제 뇌피셜이라 제가 틀린 부분이 있을 수도 있습니다,,ㅎㅎ

아래는 책의 예제인데 IDE에 그대로 작성하면 에러가 여럿 발생합니다.

const PromotionList = [
  { type: 'product', name: 'chicken' },
  { type: 'product', name: 'pizza' },
  { type: 'card', name: 'cheer-up' },
]

// 1) 'T' only refers to a type, but is being used as a value here.
type ElementOf<T> = typeof T[number]

// 2) 'PromotionList' refers to a value, but is being used as a type here. Did you mean 'typeof PromotionList'?
type PromotionItemType = ElementOf<PromotionList>

우선 2번은 에러 메시지 그대로 타입이 들어갈 자리에 값을 넣어서 발생하는 에러로 typeof PromotionList로 고치면 해결됩니다.

1번은 에러 메시지에 따르면 2번과 반대 상황으로 값이 들어갈 자리에 타입을 넣어서 발생하는 에러입니다. typeof + 값 => 타입이 되는 건데 값 자리에 제네릭 타입 T를 넣어서 에러가 발생하고 있습니다. T가 타입인데 굳이 앞에 typeof를 붙일 필요가 없습니다.

const PromotionList = [
  { type: 'product', name: 'chicken' },
  { type: 'product', name: 'pizza' },
  { type: 'card', name: 'cheer-up' },
]

// 3) Type 'number' cannot be used to index type 'T'.
type ElementOf<T> = T[number]

type PromotionItemType = ElementOf<typeof PromotionList>

하지만 여전히 3번 에러가 발생합니다. 이는 T의 형태를 모르는데 number로 인덱스드 엑세스를 시도했기 때문입니다. 따라서 T에 배열 형태만 오도록 제한해야 합니다.

const PromotionList = [
  { type: 'product', name: 'chicken' },
  { type: 'product', name: 'pizza' },
  { type: 'card', name: 'cheer-up' },
]

type ElementOf<T extends any[]> = T[number]

type PromotionItemType = ElementOf<typeof PromotionList>

이제 (any 사용을 제외하면) 에러는 해결됐습니다~!!

별개로 ElementOf 역할을 하는 유틸리티 타입은 5장의 infer를 사용해도 만들 수 있습니다. 이러면 any를 안 쓸 수 있겠네요!

type ElementOf<T> = T extends (infer E)[] ? E : never