[TypeScript] keyof/typeof 팁

keyof 연산자

keyof 연산자는 객체 타입의 모든 키를 문자열 또는 숫자 리터럴 유니온으로 반환합니다.

interface Person {
  name: string;
  age: number;
}

type PersonKeys = keyof Person; // 'name' | 'age'

typeof 연산자

typeof 연산자를 사용하여 변수 또는 객체의 타입을 추출할 수 있습니다.

const person = {
  name: 'Alice',
  age: 25
};

type PersonType = typeof person; // { name: string; age: number; }

const numbers = [1, 2, 3];

type NumbersType = typeof numbers; // number[]

keyof, typeof 연산자 함께 활용

keyof typeof obj를 활용해서 객체의 key 값 추출

const obj = {
  name: "Alice",
  age: 30
};

type ObjKeys = keyof typeof obj; // 'name' | 'age'

typeof obj[keyof typeof obj]를 이용한 객체 값 타입 추출

const obj = {
  id: 1,
  name: "Alice",
  isActive: true
};

type ObjValues = typeof obj[keyof typeof obj]; // number | string | boolean

제너릭에서 활용

const settings = {
  darkMode: false,
  version: '1.0',
  language: 'English'
};

type Settings = typeof settings;
function updateSetting<Key extends keyof Settings>(
  key: Key,
  value: Settings[Key]
): void {
  settings[key] = value;
}

// 사용 예:
updateSetting('darkMode', true); // 올바름
updateSetting('language', 'French'); // 올바름
// updateSetting('nonExistent', 'value'); // 오류: 'nonExistent'는 'settings'에서 유효한 키가 아님