keyof

객체 타입에서 프로퍼티 이름들을 모아서 Union한 타입을 만들고 싶을 때 사용된다.

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

type ProductProperty = keyof Product; // 'id' | 'name' | 'price' | 'membersOnly';

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 회복한다.

itemTable 의 keyof Item 을 사용해 주지 않으면 튜플 형식의 String 형태로 interface 접근하기에 오류가 난다, 따라서 프로퍼티의 접근을 하기위해 keyof 를 사용한다.

typeof

자바스크립트 코드에서 사용하면 결괏값이 문자열이지만, 타입스크립트 코드에서 쓸 때는 결과 값은 타입스크립트의 타입이다.

const product: Product = {
  id: 'c001',
  name: '블랙 후드 집업',
  price: 129000,
  salePrice: 98000,
  membersOnly: true,
};

console.log(typeof product); // 문자열 'object'

const product2: typeof product = { // 타입스크립트의 Product 타입
  id: 'g001',
  name: '텀블러',
  price: 25000,
  salePrice: 19000,
  membersOnly: false,
};