[TS] keyof & typeof 연산자

 

 

💡 타입스크립트에서 자주 쓰는 두 연산자에 대해 알아보자

 

먼저 keyof ~

interface Product {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
}

// 프로퍼티 이름 타입 지정
type ProductProperty = 'id' | 'name' | 'price' | 'membersOnly';

// 사용자에게 보여줄 키들을 productTableKeys 변수에 배열로 담아준다.
const productTableKeys: ProductProperty[] = ['name', 'price', 'membersOnly'];

const product: Product = {
  id: 'c001',
  name: '주전자',
  price: 129000,
  membersOnly: true,
};

for (let key of productTableKeys) {
  console.log(`${key} | ${product[key]}`);
}

// name | 주전자
// price | 129000
// membersOnly | true

 

Product 타입에 새 프로퍼티가 추가된다고 해보자.

interface Product {
  id: string;
  name: string;
  price: number;
  salePrice: number; // ** 여기 추가
  membersOnly?: boolean;
}

type ProductProperty = 'id' | 'name' | 'price' | 'salePrice' | 'membersOnly'; // * 여기 수정

 

두 곳에 값을 추가하고 있어서 유지보수에 좋지 않다.

이럴 때 keyof 연산자를 쓰면 좋다!

 

interface Product {
  id: string;
  name: string;
  price: number;
  salePrice: number;
  membersOnly?: boolean;
}

type ProductProperty = keyof Product; // Product 타입의 모든 프로퍼티 이름에 해당하는 타입을 생성!

 

배열에 새 요소를 추가하려고 보면 자동완성도 된다 ~

 

😲 또, 타입 별칭을 쓰지 않고 바로 할당도 가능하다.

const productTableKeys: (keyof Product)[] = ['name', 'price', 'membersOnly'];

 

 

이제 typeof ~

console.log(typeof product); // object

 

타입의 타입을 찍어보니 오브젝트가 나온다.

이건 js 코드이기 때문에 결과값이 문자열이다.

 

 

typeof 를 이용해 타입을 지정하면

소문자 product 를 추론해 대문자 Product 타입을 지정한다.

 

여기선 js 와 달리, 결과값이 문자열이 아닌 타입스크립트 타입이라는 점!

** 이미 존재하는 타입을 가져와 타입을 정리할 때 사용한다!

 

 

~ 활용 ~

interface Item {
  id: string;
  name: string;
  price: number;
  description: string;
}

const itemTable: [keyof Item, string][] = [
  ['name', '이름'],
  ['price', '가격'],
  ['description', '설명'],
];

const item: Item = {
  id: 'h001',
  name: '힐링 포션',
  price: 200,
  description: '마시면 체력을 50 회복한다.',
};

for (let [propertyKey, propertyName] of itemTable) {
  console.log(`${propertyName} | ${item[propertyKey]}`);
}

// 이름 | 힐링 포션
// 가격 | 200
// 설명 | 마시면 체력을 50 회복한다.