[타입 조작하기] keyof & typeof 연산자

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

section8/chapter2.ts 에서 실습을 진행했습니다.

 

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,
};

①, ③ Person 객체 타입을 정의하고 해당 타입을 갖는 변수를 하나 선언합니다.
② 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 연산자는 "오직 타입에만 적용할 수 있는 연산자" 라는 점입니다.

따라서 다음과 같이 값과 함께 사용하려고 하면 오류가 발생합니다.

(...)

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

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

 

Typeof 와 Keyof 함께 사용하기

typeof 연산자는 자바스크립트에서 특정 값의 타입의 문자열로 반환하는 연산자였습니다.

그러나 다음과 같이 타입을 정의할 때 사용하면

특정 변수의 타입을 추론하는 기능도 가지고 있습니다.

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,
};