타입스크립트정리35 - keyof 연산자

박상훈·2023년 6월 16일

인프런 한입크기로 잘라먹는 타입스크립트 - 이정환님의 강의를 보고
내용을 정리한 포스팅입니다

🥇 keyof 연산자

  • 특정개채 타입으로 부터 프로퍼티의키들을 스트링 유니온타입으로 추출합니다.
  • 무조건 타입에만 사용 가능합니다.
interface Person {
  name: string;
  age: number;
}

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

const person: Person = {
  name: "박상훈",
  age: 30,
};

getPropertykey(person, "name"); // 박상훈이 출력

⑴ Person 객체 타입에 모든 프로퍼티의 키를 유니온타입으로 추출합니다.(수정 추가 될때 일일히 변경할 필요가없어집니다.)
⑵ keyof 뒤에 무조건 타입(대문자) 가 와야됩니다

type Person =typeof person;

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

const person: Person = {
  name: "박상훈",
  age: 30,
};

getPropertykey(person, "name"); // 박상훈이 출력

⑴ typeof 를 사용하면 변수person 의 타입을 추론해서 타입 별칭에 정의해줍니다.

type Person =typeof person;

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

const person: Person = {
  name: "박상훈",
  age: 30,
};

getPropertykey(person, "name"); // 박상훈이 출력

⑴ typeof person 은 객체 타입이 됩니다.

🥈 opitoanl 선택지

interface Person {
  name: string;
  age: number;
  favoriteFood?: string; // optional property
}

const person: Person = {
  name: "박상훈",
  age: 30,
};

// "name" | "age" | "favoriteFood"
type PersonKeys = keyof Person;

function printPersonProperty(key: PersonKeys) {
  console.log(person[key]);
}

printPersonProperty("name"); // "박상훈"
printPersonProperty("age"); // 30
printPersonProperty("favoriteFood"); // undefined

이 예제에서 keyof 연산자를 사용하여 Person 인터페이스의 모든 키를 PersonKeys라는 타입으로 선언했습니다. 이를 사용하여 printPersonProperty 함수를 정의하였는데, 이 함수는 Person 객체의 모든 속성값을 인쇄할 수 있습니다. 이 예제는 keyof가 어떻게 동작하는지, 그리고 TypeScript에서 이를 어떻게 활용할 수 있는지를 보여주고 있습니다.

또한, 이 예제는 keyof가 optional property를 포함하는지에 대해서도 보여주고 있습니다. 여기서 "favoriteFood"은 optional property입니다. 따라서 keyof 연산자는 이 optional property를 포함한 모든 키를 반환합니다.

profile
다들 좋은 하루 되세요

0개의 댓글