React native 구현 중 with typescript
db 데이터의 날씨 상태값을 키로 사용해서
Icons object에서 아이콘이름을 가져오려고 한다.
아래는 데이터 타입 정의
interface weather {
weather: [
{
description: string;
icon: string;
id: number;
main: string; // Clear / Clouds / Snow ....등등의 값
}
}
아이콘 이름 오브젝트
const icons = {
Clouds: "cloud-outline" as const,
Clear: "md-sunny-outline" as const,
};
weather.main 의 값 [Clouds | Clear] 을 키 값으로 아래의 오브젝트에서 아이콘 이름을 불러본다.
icons[weather.main]
예시 : incons["Clear"]
기대값 : "md-sunny-outline"
하지만 오류가 나타난다.
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ Clouds: "cloud-outline"; Clear: "md-sunny-outline"; }'
No index signature with a parameter of type 'string' was found on type '{ Clouds: "cloud-outline"; Clear: "md-sunny-outline"; }'.
db에서 불러오는 날씨 정보의 clear / clouds 키 타입이 string인데
string 타입의 index signature를 icons 오브젝트 안에서 찾을 수 없단다.
이는 키값이 string타입이 아니어서 나오는 오류이다.
'{ Clouds: "cloud-outline"; Clear: "md-sunny-outline"; }'
오류 해결
icons 오브젝트의 키가 string이라고 타입을 정의한다.
const icons:{[key : string] : string } = {
Clouds: "cloud-outline" as const,
Clear: "md-sunny-outline" as const,
};
예시 : incons["Clear"]
기대값 : "md-sunny-outline"