타입스크립트로 코드를 짜다보면 기존에 정의된 객체의 데이터 형을 가져와야하는 상황이 생기는데 가령,
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]
조금 귀찮고 복잡하긴 하지만 이런식으로 정의하면, 원하는 객체의 키값 혹은 밸류값으로 이루어진 타입을 정의할 수 있게 된다.