02.Keyof&Typeof.operators.md

2. keyof & typeof 연산자

Keyof 연산자

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

keyof 연산자를 사용하는 예시

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

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

const person: Person = {
  name: "이정환",
  age: 27,
};

→ 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: 27,
};

이렇게 매번 매개변수의 타입을 바꿔줘야 하면 함수가 많아지면 많아질수록 불편해짐. 이럴 때 다음과 같이 Keyof 연산자를 이용하면 좋음

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

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

const person: Person = {
  name: "이정환",
  age: 27,
};

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

주의할 점

• keyof 연산자는 오직 타입에만 적용할 수 있는 연산자임
  

Typeof와 Keyof 함께 사용하기

typeof 연산자는 JS에서 특정 값의 타입을 문자열로 변환하는 연산자임. 그러나 다음과 같이 타입을 정의할 때 사용하면 특정 변수의 타입을 추론하는 기능도 가지고 있음

type Person = typeof person;
// 결과
// {name: string, age: number, location:string}

(...)

이러한 특징을 이용하면 keyof 연산자를 다음과 같이 사용할 수 있음

(...)

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

const person: Person = {
  name: "이정환",
  age: 27,
};