[TS] 타입스크립트 typeof 와 keyof

간단하게 설명하면 typeof는 값의 타입을 가져올 때, keyof는 객체 타입의 키들을 유니온 타입으로 반환할 때 사용합니다.

 

typeof 란?

타입스크립트에서 typeof는 자바스크립트의 typeof와 조금 다릅니다.

• 자바스크립트
  : typeof는 값의 타입을 문자열로 반환
• 타입스크립트
  : typeof는 값의 타입을 문자열로 반환. 하지만 값의 타입 그 자체를 반환하기도 함

예시)

/////////////// Javascript ///////////////
const js = 1;
const jsType = typeof js;
// jsType은 'number'라는 문자열이다.


/////////////// Typescript ///////////////
const ts = 1;
const tsType = typeof ts;
// tsType은 'number'라는 문자열이다.

const ts2 = 1;
type Ts2Type = typeof ts2;
// Ts2Type은 1이라는 타입(리터럴 타입)이다.

 

 

keyof 란?

타입스크립트에서 keyof는 객체 타입의 키들을 유니온 타입으로 반환합니다.

예시)

type TsType = {
    name: string;
    age: number;
};
type TsTypes = keyof TsType;
// TsTypes는 'name'|'age'

 

 

사용법

typeof 사용하는 경우

예시: 어떤 상수를 기준으로 타입을 만들고 싶을 때

const colors = {
  primary: '#ff0000',
  secondary: '#00ff00',
  warning: '#ffff00',
};

// 이 객체를 기준으로 타입을 만들고 싶다면?
type ColorType = typeof colors;
// ColorType은
// {
//     primary: string;
//     secondary: string; 
//     warning: string
// }

colors라는 객체와 동일한 구조의 타입을 사용할 수 있습니다.

 

keyof 사용하는 경우

예시: 특정 객체의 정보를 key값을 이용해 조회하려고할 때

type User = {
  id: number;
  name: string;
  email: string;
};

function getUserProperty(user: User, key: keyof User) {
  return user[key];
}

이런 상황에서 key: string으로 설정한다면 user에는 존재하지 않는 key를 넣을 수도 있는 상황이 발생합니다. 그럼 에러가 발생할 수 있기에 정확하게 User 타입에 존재하는 key값만 받겠다라는 설정이 위와 같습니다.