keyof 연산자는 객체 타입으로부터 프로퍼티의 모든 key
들을 String Literal Union
타입으로 추출하는 연산자이다.
다음은 keyof
연산자를 사용하는 예시이다.
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” | “age”
로 정의했는데 이렇게 정의하면 Person
타입에 새로운 프로퍼티가 추가되거나 수정될 때 마다 이 타입도 계속 바꿔줘야 한다.
이럴 때 다음과 같이 keyof 연산자를 이용할 수 있다.
function getPropertyKey(person: Person, key: keyof Person) {
return person[key];
}
keyof 연산자는 위와 같이 keyof 타입
형태로 사용하며 타입의 모든 프로퍼티 key를 String Literal Union 타입
으로 추출한다.
따라서 keyof Person
의 결과값은 “name” | “age” | “location”
이 된다.
한가지 주의할 점은 keyof 연산자는 오직 타입에만 적용할 수 있는 연산자이기 때문에 다음과 같이 값과 함께 사용하려고 하면 오류가 발생한다는 것이다.
typeof 연산자는 자바스크립트에서 특정 값의 타입을 문자열로 반환하는 연산자이지만, 다음과 같이 타입을 정의할 때 사용하면 특정 변수의 타입을 추론하는 기능도 가지고 있다.
type Person = typeof person;
function getPropertyKey(person: Person, key: keyof Person) {
return person[key];
}
const person = {
name: "woodstock",
hp: 90,
};
getPropertyKey(person, "name"); // woodstock
이러한 특징을 이용하여 keyof 연산자를 다음과 같이 사용할 수 있다.
function getPropertyKey(person: Person, key: keyof typeof person) {
return person[key];
}