타입스크립트 - keyof 연산자

keyof 연산자

객체타입으로부터 key들을 유니언 타입으로 뽑아줌

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

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

const person: Person = {
  name: 'kang',
  age: 30
}

getPropertyKey(person, "name")

• getPropertyKey 함수의 매개변수 중 key는 string, 이렇게 지정해버리면 나중에 getPropertyKey(person, “name123”)이렇게 없는 매개변수 넣게되면 return에서 오류가 발생한다. (그냥 string 해도 이미 빨간줄이 그어지기는 한다.)
• 이를 방지하기 위해서는 key에 Person의 값인 name, age를 넣어주면 간단히 해결할 수 있다.

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

• 그런데 만약, 저런 프로퍼티가 계속 늘어나게 된다면? 또 기존 프로퍼티의 이름이 바뀐다면? 매개변수에 지정해준 타입 내용도 다 똑같이 바꿔줘야 할 것이다. 이를 방지하기 위해 keyof연산자가 나왔다.
• keyof 는 설명처럼 객체타입으로부터 key들을 유니언 타입으로 뽑아준다. 따라서 위의 예시에선 string | number 로 뽑아주는 것이다.

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

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

const person: Person = {
  name: 'kang',
  age: 30
}

getPropertyKey(person, "name")

💡 keyof 뒤에는 당연하게도 타입이 들어가야한다.

• keyof 연산자는 typeof와도 같이 사용할 수 있는데 아래의 예처럼 사용할 수 있다.

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