TypeScript keyof typeof - boostcamp-2020/Project15-C-Client-Based-Formula-Editor GitHub Wiki

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는 instance의 keyof와 똑같다고 볼 수 있을 것 같다. enum은 객체이기 때문에 keyof만 했을 때는 객체의 key들이 나오고 keyof typeof를 했을 때 원하는 값이 나왔다. interface는 객체가 아니기 때문에 keyof만 했을 때도 바로 원하는 값이 나온다.

const object =  {
    Nike: 'nike',
    Adidas: 'adidas',
    Puma: 'puma'
}

let type: keyof typeof object

객체의 경우에도 enum과 똑같이 작동하는 것을 볼 수 있었다. 즉 enum 객체로 변환 되기 때문이다.