TypeScript에서 keyof, typeof, in 연산자 실전 사용법

TypeScript는 정적 타입 시스템을 통해 코드 안정성을 크게 향상시켜줍니다.

그중에서도 keyof, typeof, in은 자주 사용되면서도 초보자에게 혼란을 줄 수 있는 연산자입니다.

이번 글에서는 이 세 가지 연산자의 개념부터 실전 활용 예시에 대해 정리해보겠습니다.

---

1. keyof 연산자

1.1. 개념

keyof는 객체 타입의 키 값들만 union 타입으로 반환합니다.

type User = {
  id: number;
  name: string;
  isActive: boolean;
};

type UserKeys = keyof User; // "id" | "name" | "isActive"

---

1.2. 실전 활용

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

const user = { id: 1, name: "ohhaio" };
const name = getValue(user, "name"); // "ohhaio"

• 실행 시점 에러를 컴파일 시점에 차단 할 수 있습니다.
• 오타나 잘못된 키 접근을 예방합니다.

---

2. typeof 연산자

2.1. 개념

typeof는 변수나 값의 타입을 추론할 때 사용됩니다.
JavaScript의 typeof는 런타임에서 작동하지만, TypeScript의 typeof는 타입 레벨에서 작동합니다.

const config = {
  apiUrl: "https://example.com",
  timeout: 3000,
};

type Config = typeof config;
// {
//   apiUrl: string;
//   timeout: number;
// }

2.2 실전 활용

const colors = {
  primary: "#4b79cf",
  secondary: "#f5f5f5",
} as const;

type ColorKey = keyof typeof colors; // "primary" | "secondary"
type ColorValue = (typeof colors)[ColorKey]; // "#4b79cf" | "#f5f5f5"

• as const와 함께 사용하면 literal type으로 고정되어 안전성이 높아집니다.
• 디자인 시스템, 테마 등의 고정 데이터 타입 선언에 유용합니다.

---

3. in 연산자

3.1. 개념

in은 타입 수준에서 사용될 경우 Mapped Type 생성에 쓰입니다.

type Keys = "a" | "b" | "c";
type Flags = {
  [K in Keys]: boolean;
};
// {
//   a: boolean;
//   b: boolean;
//   c: boolean;
// }

3.2. 실전 활용

type ApiResponse<T> = {
  [K in keyof T]: {
    data: T[K];
    loading: boolean;
    error: string | null;
  };
};

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

type UserApiState = ApiResponse<User>;
/*
{
  name: { data: string; loading: boolean; error: string | null; };
  age: { data: number; loading: boolean; error: string | null; };
}
*/

• API 상태 관리, Form 상태 정의 등에 반복적인 타입 선언을 줄이는 데 유리합니다.

---

4. 마무리

• keyof는 객체 키를 타입으로 추출할 수 있어, 타입 안전한 접근 함수에 적합합니다.
• typeof는 런타임 객체의 타입을 타입 시스템에 반영할 수 있어, 상수 기반 코드에 강력합니다.
• in은 동적인 타입 생성 및 반복적인 타입 선언을 자동화할 때 매우 유용합니다.