우선, 타입스크립트에서는 스트링으로 객체 키 접근이 불가능하다.
const gradeData = {
"1": {"color": "#32A1FF", "text": "좋음"},
"2": {"color": "#02C73D", "text": "보통"},
"3": {"color": "#FFC323", "text": "한때나쁨"},
"4": {"color": "#FD9B5A", "text": "나쁨"},
"5": {"color": "#FF5959", "text": "매우나쁨"},
"null": {"color": "gray", "text": "알수없음"}
}
console.log(greadeData["1"]) // 컴파일 에러가 난다.
위 코드와 같이 객체의 스트링을 통해 키에 접근하여 값을 추출하는게 안된다.
왜냐하면,
=> 그렇다면 string과 string literal의 차이는 뭘까?!
const a = "좋음"
let b = "보통"
const c: string = "나쁨"
b는 기본적으로 타입스크립트가 타입추론을 통해 문자열이라고 타입을 인식한다. let으로 선언했기 때문에 다른 여러 문자열들이 할당 될 수 있다.
c는 string이라고 명시적으로 타입을 선언했기 때문에 string 타입이다.
a는 const로 선언을 하고 string 문자열이 할당 되었다. 타입스크립트 컴파일러는 a를 단순한 string이 아닌, "좋음"만 허용되는 string literal 타입을 선언했다고 판단한다.
type gradeDataType = {
[index: string]: string // 키와 값의 string이 들어오도록 index signature 선언
"1": {}
"2": {}
"3": {}
"4": {}
"null": {}
}
const gradeData: gradeDataType = {
"1": {"color": "#32A1FF", "text": "좋음"},
"2": {"color": "#02C73D", "text": "보통"},
"3": {"color": "#FFC323", "text": "한때나쁨"},
"4": {"color": "#FD9B5A", "text": "나쁨"},
"5": {"color": "#FF5959", "text": "매우나쁨"},
"null": {"color": "gray", "text": "알수없음"}
}
console.log(greadeData["1"].text) // "좋음"
위와 같이 사용시 이제는 에러가 발생하지 않고 타입스크립트에서 string으로 객체의 키에 접근할 수 있게 된다!!