TypeScript 기본 : 타입 조작 (2) keyof + typeof 연산자

2. keyof 연산자

: 객체 형태의 타입에서 속성들만 뽑아 유니온 타입으로 만드는 연산자. 
type과 interface 모두에 사용할 수 있다. 

keyof 연산자는 객체 타입에서 객체의 키 값들을 숫자나 문자열 리터럴 유니언을 생성합니다.

 

type Type = {
	name: string;
	age: number;
	married: boolean;
};

type Union = keyof Type;
type Union2 = 'name' | 'age' | 'married'

const union: Union = 'married';

 

타입 Type을 keyof를 이용해 유니온 타입으로 반환한 Union을 타입으로 지정하면
새로운 변수 union에 key값인 'married'를 할당할 수 있게 된다. 

 

 

3. typeof 연산자

: 객체 데이터를 객체 타입으로 변환해주는 연산자
객체 데이터에 쓰인 구조를 가져와 재활용하거나 독립된 타입으로 만들고 싶을 때 사용할 수 있다.

 

JS에서의 typeof는 피연산자의 평가 전 자료형을 반환하는 연산자였다. 

console.log(typeof 42);
// Expected output: "number"

 

 

TS에서는 이렇게 사용할 수 있다.

타입 Fruit에 typeof obj로 obj를 타입으로 변환해 담아주고, obj2에서 꺼내 재사용한다. 

const obj = {
	red: 'apple',
	yellow: 'banana',
	green: 'cucumber',
};

type Fruit = typeof obj;
let obj2: Fruit = {
	red: 'pepper',
	yellow: 'orange',
	green: 'peanut',
};

 

 

keyof와 typeof를 함께 사용하면 객체를 => 타입으로 변환 (typeof) 한 뒤에 => 유니온 타입으로 변환 (keyof) 할수 있다.

  

const obj = {
	red: 'apple',
	yellow: 'banana',
	green: 'cucumber',
};

type Color = keyof typeof obj;
// type Color = 'red'|'yellow'|'green'

 

keyof (typeof obj) 순서로 작성한다. 

 

 

---

참고자료

 

TS공식문서

한 입 크기로 잘라먹는 타입스크립트

Inpa Dev