타입스크립트에서 객체의 key값 혹은 value값만 가져오기

타입스크립트로 코드를 짜다보면 기존에 정의된 객체의 데이터 형을 가져와야하는 상황이 생기는데 가령,

const Data = {
    1st : 'apple',
    2nd : 'grape',
    3rd : 'banana',
}
    

이런 객체가 있다고 하자 Data 타입을 사용해야한다고 하면 보통 밑의 코드와 같이 정의를 해서 사용한다.

type DataType = {
	
    1st : string,
    2nd : string,
    3rd : string,

}

하지만, 가끔 이런식으로 정의하지않고 정확하게 Data안의 값혹은 키값들로 정의하고 사용해야하는 순간이 온다.

//key 값으로 정의
type DataKeys = "1st" | "2nd" | "3rd"

// value 값으로 정의
type DataValues = "apple" | "grape" | "banana"

이때 위에 코드처럼 일일히 직접 다 적어주는 방법도 있지만, 이런 방법은 좋은 방법은 아닐것이다.

주어지는 데이터 값의 변화가 일어나면 그 변화에 맞게 타입형도 다 일일히 바꿔주어야 한다는 치명적인 단점이 있기 때문.

그렇다면 어떤식으로 정의를 해야 value 값과 key값들을 가져와서 원하는 타입을 정의할수있을까?

이때 사용되는것이 typeof 와 keyof 이다.

//key 값으로 정의 => 결과 : "1st" | "2nd" | "3rd"
type DataKeys = keyof typeof Data

//typeof Data의 결과 

{
   1st : 'apple',
   2nd : 'grape',
   3rd : 'banana'
} 

//keyof typeof Data의 결과

"1st" | "2nd" | "3rd"

  

// value 값으로 정의 => 결과 : "apple" | "grape" | "banana"
type DataValues = typeof Data[keyof typeof Data]

조금 귀찮고 복잡하긴 하지만 이런식으로 정의하면, 원하는 객체의 키값 혹은 밸류값으로 이루어진 타입을 정의할 수 있게 된다.