obj["key"] 오류: type 'string' can't be used to index type

Darcy Daeseok YU ·2022년 2월 21일
1
post-custom-banner

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 | Clear 라는 키는 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"

profile
React, React-Native https://darcyu83.netlify.app/
post-custom-banner

0개의 댓글