keyof typeof가 이해가 잘 안 돼서 공부해보고 적는 글입니다.
enum Brand {
Nike = 'nike',
Adidas = 'adidas',
Puma = 'puma'
}
간단하게 이런 코드가 있다고 해보자. 그럴 때 typeof 를 사용해본다.
let type: typeof Brand = {Nike: Brand.Nike, Adidas: Brand.Adidas, puma: Brand.puma};
그럼 이렇게 밖에 사용이 안되는 걸 확인할 수 있다. enum 은 객체로 변환된다. typeof를 사용하게 되면 그냥 그 객체 자체가 type이 되어버려 똑같이 사용해야만 한다. 그럼 이 typeof 를 했을 때 만들어진 type이 interface와 비슷하다고 생각하면 좋을 것 같다.
let type: keyof Brand
이런식으로 하고 type에 마우스를 올려보면 객체의 프로퍼티들이 찍히는걸 볼 수 있다. Brand가 Object이기 때문에 나오는 것이다.
let type: keyof typeof Brand
이 코드의 type에 마우스를 올려보면 'Nike' | 'Adidas' | 'Puma'가 나오는걸 확인할 수 있을 것이다. typeof Brand가 enum 객체 그 자체이고 그것의 key들을 뽑아냈기 때문에 저렇게 됐다고 할 수 있다.
interface Brand {
Nike: 'nike';
Adidas: 'adidas';
Puma: 'puma';
}
let type: keyof Brand
이런식으로 작성하고 type에 마우스를 올려보면 아까 위와 똑같이 'Nike' | 'Adidas' | 'Puma'로 나오는것을 확인할 수 있다.
즉, enum의 keyof typeof는 interface의 keyof와 똑같다고 볼 수 있을 것 같다. enum은 객체이기 때문에 keyof만 했을 때는 객체의 key들이 나오고 keyof typeof를 했을 때 원하는 값이 나왔다. interface는 객체가 아니기 때문에 keyof만 했을 때도 바로 원하는 값이 나온다.
const object = {
Nike: 'nike',
Adidas: 'adidas',
Puma: 'puma'
}
let type: keyof typeof object
객체의 경우에도 enum과 똑같이 작동하는 것을 볼 수 있었다. 즉 enum 객체로 변환 되기 때문이다.