[TS] Keyof 연산자

Keyof 연산자란❓

객체 타입으로부터 프로퍼티의 모든 key들을 String Literal Union 타입으로 추출하는 연산자이다.

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

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

// Person타입을 갖는 변수 선언
const person: Person = {
  name: "이유림",
  age: 26,
};

getPropertyKey 함수는 두 개의 매개변수가 있으며,
두 번째 매개변수 key에 해당하는 프로퍼티의 값을 첫 번째 매개변수 person에서 꺼내 반환한다.

이때 key의 타입을 “name” | “age”로 정의했는데 이렇게 정의하면 아래와 같이 Person 타입에 새로운 프로퍼티가 추가되거나 수정될 때 마다 이 타입도 계속 바꿔줘야 한다.

interface Person {
  name: string;
  age: number;
  location: string; // 추가
}

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

const person: Person = {
  name: "이유림",
  age: 26,
};

이러면 함수가 많아질수록 불편해지는데, 이럴 때 Keyof 연산자를 이용하면 편리하다.

interface Person {
  name: string;
  age: number;
  location: string; // 추가
}

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

const person: Person = {
  name: "이유림",
  age: 26,
};

keyof 연산자는 위와 같이 keyof 타입 형태로 사용하며 타입의 모든 프로퍼티 key를 String Literal Union 타입으로 추출한다. 따라서 keyof Person의 결과값은 “name” | “age” | “location”이 된다.