[타입스크립트] typescript keyof 특정 객체 유니온 타입 기법

타입스크립트

 

 

 

🤷‍♂️ 타입스크립트 keyof란?

---

자바스크립트에서는 존재하지 않는 keyof 연산자입니다.

타입스크립트는 자바스크립트의 슈퍼셋이며 자바스크립트를 컴파일해서 실행합니다.

타입스크립트에서 keyof 타입 연산자는 주어진 객체의 모든 속성의 key값을 유니온 타입으로 반환합니다.

이 keyof 연산자를 활용하면 더 안전하고 강력한 코드로 유지보수할 수 있습니다.

 

 

 

 

[타입스크립트] 타입스크립트 개념과 실무에 유용한 Type Narrowing 기법

https://cometruedream.tistory.com/265

[타입스크립트] 타입스크립트 개념과 실무에 유용한 Type Narrowing 기법

 

🤷‍♂️ keyof 기본 개념?

---

 

 

1. keyof 기본 사용법

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

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

 

Person 객체 타입의 속성 name, age, address를 유니온 타입으로 만들어서 PersonKeys 타입에 저장합니다.

PersonKeys은 Person 객체 타입의 속성을 유니온 타입 "name" | "age" | "address" 정의됩니다.

 

2. 객체의 속성을 유니온 타입으로 변환

interface Car {
  make: string;
  model: string;
  year: number;
}

type CarKeys = keyof Car; // "make" | "model" | "year"

const key: CarKeys = "model"; // 유효함

const invalidKey: CarKeys = "color"; 
// 오류: "color"는 "make" | "model" | "year" 중 하나가 아닙니다.

 

위 예제처럼 Carkeys는 keyof 연산자를 활용해서 Car 객체 속성을 “make”, “model”, “year” 유니온 타입으로 변환해서 key 타입으로 정의합니다.

“model” 유니온타입 속성이기 때문에 오류가 발생되지 않습니다.

하지만 “color” 유니온타입 속성이 아니기 때문에 오류가 발생합니다.

 

 

 

3. 객체 속성 key을 활용한 함수

interface User {
  username: string;
  email: string;
  password: string;
}

function getProperty<T>(obj: T, key: keyof T): T[keyof T] {
  return obj[key];
}

const user: User = {
  username: 'john_doe',
  email: 'john@example.com',
  password: 'secret',
};

const username = getProperty(user, 'username'); // "john_doe"
const email = getProperty(user, 'email'); // "john@example.com"

const invalid = getProperty(user, 'nonexistent'); 
// 오류: 'nonexistent'는 'username' | 'email' | 'password' 중 하나가 아닙니다.

 

이 함수는 객체와 속성 key을 받아 해당 객체의 속성 값을 반환합니다.

 

🤷‍♂️ keyof 연사자를 사용하는 이유

---

• keyof는 객체 타입의 모든 속성 이름을 유니온 타입으로 추출하는 연산자입니다.
• keyof를 통해 타입 안전성을 높이고 더 강력하게 코드를 관리하고, 코드에서 속성 이름을 동적으로 사용할 수 있게 됩니다.
• keyof를 활용하면 객체의 속성 이름을 기반으로 더 안전한 함수나 타입을 정의할 수 있습니다.

 

🤷‍♂️ 마지막으로

---

타입스크립트 사용하다보면 다양한 객체 속성에 타입을 세팅해야 될 때가 있습니다.

keyof 연산자를 활용해서 객체 속성을 유니온 타입으로 변환해서 타입 안정성과 더 강력한 코드로 유지보수 할수 있습니다.

 

keyof 연산자는 타입스크립트에서 한 번쯤은 볼 수 있는 타입 연산자이며 keyof가 어떤 용도로 사용하고 정의하는지 궁금하거나 잘 모를 수 있습니다.

 

이 글을 통해서 타입스크립트에 keyof 연산자를 이해하고 잘 활용할수 있으면 좋겠습니다.

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

 

 

https://fnfentermagazine.com/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%88%ab%ec%9e%90-%ec%9e%90%eb%a3%8c%ea%b5%ac%ec%a1%b0%ec%9d%98-%ea%b0%9c%eb%85%90%ea%b3%bc-%eb%82%b4%ec%9e%a5%ed%95%a8%ec%88%98/

[자바스크립트 2탄] 자바스크립트 숫자 자료구조의 개념과 내장함수