[TIL] 내일배움캠프 1.27

TypeScript enum 강의를 다 듣고 튜터님이 내주신 enum 과제를 수행하던 중 내가 고생했던 부분을 적어보겠다.

enum Color {
    Red,
    Blue,
    Black,
}

enum Car {
    Sedan,
    Truck,
    Coupe,
}

위와 같이 Color, Car enum 이 선언되어있다.

type Inventory = {
	
}

Inventory 타입을 만들고,

const inventory = {
	Sedan: 'Red',
  	Truck: 'Black',
};

inventory 객체에 타입을 반영하세요! 하는 문제였다.

시도

type Inventory = {
	[key in Car]?: string
}

나는 당연히 Car의 key 들을 가져오면 되는 줄 알고 이렇게 작성하였다.

//  'Inventory' 타입에 Sedan 속성이 없습니다.

Inventory 타입에 마우스를 올려보면

key 들이 0, 1, 2 로 나온다.

Car enum이 숫자형 enum 이기 때문에 이렇게 나오는 것 같다.

해결

Sedan, Truck, Coupe 와 같은 문자열형 key를 가질 수 있게 하려면

먼저, TypeScript에서 객체 데이터로 인식되는 enum을 객체 타입으로 사용할 수 있게 변환해주는 연산자인 typeof를 사용해야한다.

type TCar = typeof Car;
/*
	type Tcar = {
    	0: Sedan,
        1: Truck,
        2: Coupe
    	Sedan: 0,
        Truck: 1,
        Coupe: 2,
    }
*/

이 객체 타입에서 속성들만 따로 뽑아 쓰면 Sedan, Truck, Coupe를 사용 할 수 있다. 이럴 때 keyof 연산자를 사용하면 된다.

type Tcar = keyof typeof Car;
/*
	type Tcar = 0 | 1 | 2 | Sedan | Truck | Coupe 
*/

keyof 연산자를 쓰면 속성들만 뽑아 유니온 타입으로 만들어 준다.

따라서,
위의 퀴즈에 적용시켜 보면

type Inventory = {
	[key in keyof typeof Car]?: keyof typeof Color;
};

마우스를 올려보면 다음과 같이 나온다.