답변.

keyof와 typeof 연산자는 TypeScript의 강력한 타입화 도구입니다. 이들을 함께 사용하면 즉석에서 타입을 생성하고, 안전한 함수를 만들며, 객체의 구조를 최대한 유연하게 표현할 수 있습니다.

질문의 배경

TypeScript에서 typeof는 변수에 따라 타입을 추론하는 데 사용되고, keyof는 객체 또는 타입의 모든 키의 union을 반환합니다. 이 둘을 결합하면 동적으로 선언된 객체를 다루고 상호 연관된 타입을 생성할 수 있습니다.

문제점

이런 연산자가 없으면 객체, enum 및 맵을 다룰 때 수동으로 키의 문자열을 타입과 값에 반복적으로 작성해야 할 경우가 많아져 동기화 오류를 일으키고 코드 유지 보수를 복잡하게 합니다.

해결책

typeof를 사용하여 변수의 값으로부터 타입을 얻고, keyof를 사용하여 모든 키의 union 타입을 만듭니다. 결과적으로 타입화가 자동화됩니다.

코드 예:

const ERRORS = {
  NOT_FOUND: 'Not found',
  UNAUTHORIZED: 'Unauthorized',
  SERVER_ERROR: 'Server error',
};

// typeof를 통해 타입을 얻고, keyof를 통해 객체의 모든 키를 얻습니다.

function getErrorMessage(code: keyof typeof ERRORS): string {
  return ERRORS[code];
}

주요 특징:

수동 업데이트 없이 엄격하게 연결된 key-value 타입을 구축하는 데 도움을 줍니다.
객체의 키와 함께 작동하는 함수의 타입화가 가능합니다.
키와 타입 간의 동기화 문제를 제거합니다.

Trick 질문들.

typeof를 통해 얻은 객체의 값이 union 타입의 키가 자동으로 될 수 있나요?

아니요, typeof는 객체 구조의 타입을 반환할 뿐 값은 반환하지 않습니다. 값을 union으로 얻으려면 값의 타입을 별도로 추론해야 합니다.

enum에 대해 typeof는 무엇을 반환하며, keyof typeof는 무엇을 반환하나요?

enum에 대해 typeof는 enum 객체의 타입을 반환하고 (key-value와 value-key 모두 방향을 포함), keyof typeof는 이 객체의 문자열/숫자 키의 union을 제공합니다. 예:

enum Colors { Red = 'R', Blue = 'B' }
type ColorKeys = keyof typeof Colors; // 'Red' | 'Blue'

keyof typeof를 사용하여 객체의 키를 받는 함수의 모든 가능한 매개변수에 대해 type-safe 리스트를 얻을 수 있나요?

네, 이렇게 하면 허용되는 키만 받는 함수를 만들 수 있습니다. 이는 객체의 키를 다룰 때 오류를 방지합니다.

const config = { mode: 'dark', lang: 'ru' };
type ConfigKeys = keyof typeof config; // 'mode' | 'lang'
function useConfig(key: ConfigKeys) {
  // ...
}

일반적인 오류 및 안티패턴

keyof typeof가 배열의 값에 적용될 것이라는 잘못된 기대 — 배열의 경우 인덱스입니다, 값이 아닙니다.
typeof가 타입 수준에서 작동하며 runtime 값을 반환하지 않는다는 이해 부족.
명시적으로 선언되지 않은 타입에 적용 시 타입 추론이 깨집니다.

실생활 예

부정적인 사례

API 상태와 관련된 상수에서 문자열 키의 타입을 수동으로 지정합니다:

type StatusCodes = 'OK' | 'FAIL' | 'PENDING';
function isKnownStatus(code: StatusCodes) { /* ... */ }

장점:

어떤 문자열이 허용되는지 명확하게 보입니다.

단점:

리스트가 업데이트될 때 타입을 수동으로 변경해야 하며; 동기화 문제와 오류 발생.

긍정적인 사례

리스트의 자동 지원을 위해 keyof typeof를 사용합니다:

const STATUS = { OK: 1, FAIL: 0, PENDING: 2 };
type StatusKeys = keyof typeof STATUS;
function checkStatus(key: StatusKeys) { /* ... */ }