[TS] keyof, unionType

(keyof ApiData)[]는 TypeScript에서 타입을 정의할 때 사용되는 구문으로, 이를 이해하기 위해 keyof 키워드와 배열 타입에 대해 알아보겠습니다.

1. keyof 키워드

keyof 키워드는 TypeScript에서 객체 타입의 키들을 유니언 타입(union type)으로 반환합니다. 예를 들어, 특정 인터페이스나 객체 타입이 있을 때, 그 타입의 모든 키를 나열하는 데 사용됩니다.

interface ApiData {
  id: number;
  name: string;
  email: string;
}

type ApiDataKeys = keyof ApiData; // "id" | "name" | "email"

위 예제에서 keyof ApiData는 "id" | "name" | "email"이라는 유니언 타입을 반환합니다. 즉, ApiDataKeys 타입은 id, name, 또는 email이라는 문자열 중 하나가 될 수 있습니다.

2. 배열 타입

배열 타입을 정의하려면 특정 타입 뒤에 []를 붙입니다. 예를 들어, string[]는 문자열 배열을 의미하고, number[]는 숫자 배열을 의미합니다.

let stringArray: string[] = ["apple", "banana", "cherry"];

3. (keyof ApiData)[]의 의미

(keyof ApiData)[]는 앞서 설명한 두 가지 개념을 결합한 것입니다.

• keyof ApiData는 ApiData 타입의 모든 키의 유니언 타입("id" | "name" | "email")을 반환합니다.
• 이 유니언 타입에 []를 붙이면, 해당 키들로 이루어진 배열 타입이 됩니다.

따라서 (keyof ApiData)[]는 "id" | "name" | "email" 값들만을 요소로 가질 수 있는 배열 타입을 의미합니다. 즉, 이 배열에는 "id", "name", 또는 "email" 문자열만 들어갈 수 있습니다.

const keys: (keyof ApiData)[] = ["id", "name"]; // 올바른 배열
const invalidKeys: (keyof ApiData)[] = ["id", "name", "age"]; // 오류 발생: "age"는 ApiData의 키가 아님

4. 타입 캐스팅과의 결합

이제 ['id', 'name'] as (keyof ApiData)[]를 살펴보겠습니다.

const keys = ['id', 'name'] as (keyof ApiData)[];

여기서:

• ['id', 'name']은 일반적인 문자열 배열입니다.
• as (keyof ApiData)[]는 이 배열을 keyof ApiData로 이루어진 배열로 타입 캐스팅합니다.

따라서 이 배열이 ApiData의 키들("id", "name", "email") 중 하나로만 구성된 배열임을 TypeScript 컴파일러에게 명시적으로 알려주는 것입니다. 이 타입 캐스팅을 통해 컴파일러는 이 배열이 ApiData의 키들로만 구성되어 있다고 믿고, 이후 해당 배열을 사용할 때 적절한 타입 검사를 수행하게 됩니다.

결론

(keyof ApiData)[]는 특정 객체 타입 ApiData의 키들로 이루어진 배열을 정의하는 타입입니다. 이 배열은 id, name, email과 같은 ApiData의 키들로만 구성될 수 있으며, 타입 캐스팅(as (keyof ApiData)[])을 사용하면 일반 배열을 이 타입으로 강제 변환할 수 있습니다. 이를 통해 코드의 타입 안전성을 유지하면서도 컴파일러가 명확히 추론할 수 없는 경우에 타입을 지정할 수 있습니다.