[TypeScript] 객체 키 접근을 string을 사용하기

제론·2022년 9월 17일
0

우선, 타입스크립트에서는 스트링으로 객체 키 접근이 불가능하다.

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"]) // 컴파일 에러가 난다.

위 코드와 같이 객체의 스트링을 통해 키에 접근하여 값을 추출하는게 안된다.

왜냐하면,

  • 객체 키는 타입스크립트에서 stirng literal만 허용한다.

=> 그렇다면 string과 string literal의 차이는 뭘까?!

string vs string literal

const a = "좋음"
let b = "보통"
const c: string = "나쁨"
  • b는 기본적으로 타입스크립트가 타입추론을 통해 문자열이라고 타입을 인식한다. let으로 선언했기 때문에 다른 여러 문자열들이 할당 될 수 있다.

  • c는 string이라고 명시적으로 타입을 선언했기 때문에 string 타입이다.

  • a는 const로 선언을 하고 string 문자열이 할당 되었다. 타입스크립트 컴파일러는 a를 단순한 string이 아닌, "좋음"만 허용되는 string literal 타입을 선언했다고 판단한다.

Index Signature 선언으로 객체의 키 string으로 접근

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으로 객체의 키에 접근할 수 있게 된다!!

profile
Software Developer

0개의 댓글