[TS] keyof와 typeof 연산자

keyof 연산자

keyof 연산자는 객체 타입의 모든 프로퍼티 키를 String Literal Union 타입으로 추출하는 연산자이다.

 

객체의 프로퍼티 값을 가져오는 함수를 작성해보자.

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

function getPropertyKey(person: Person, key: "name" | "hp") {
  return person[key];
}

const person: Person = {
  name: "woodstock",
  hp: 90,
};

getPropertyKey(person, "name");

이렇게 key의 타입을 "name" | "hp"로 정의하면 Person 타입에 프로퍼티가 추가되거나 수정될 때마다 이 타입도 함께 바꿔야 한다.

 

keyof 연산자를 사용하면 이 문제를 해결할 수 있다.

function getPropertyKey(person: Person, key: keyof Person) {
  return person[key];
}

keyof Person은 Person 타입의 모든 프로퍼티 키를 추출하여 "name" | "hp" 유니언 타입을 만든다.

 

주의사항

keyof 연산자는 타입에만 사용할 수 있다. 값과 함께 사용하면 오류가 발생한다.

 

typeof 연산자

자바스크립트의 typeof 연산자는 값의 타입을 문자열로 반환한다. 타입스크립트에서는 타입 정의에 사용하면 변수의 타입을 추론하는 기능도 있다.

const person = {
  name: "woodstock",
  hp: 90,
};

type Person = typeof person;
// type Person = { name: string; hp: number; }

 

keyof와 typeof 함께 사용하기

두 연산자를 함께 사용하면 더 유연하게 타입을 정의할 수 있다.

const person = {
  name: "woodstock",
  hp: 90,
};

function getPropertyKey(person: typeof person, key: keyof typeof person) {
  return person[key];
}

getPropertyKey(person, "name"); // woodstock

typeof person으로 person 객체의 타입을 추론하고, keyof typeof person으로 그 타입의 모든 키를 추출한다.