[09/26] `Property 'key' does not exist on type 'object'.` error

문제

Property 'key' does not exist on type 'object'.

// component.ts
// useState
const [locationFloor, setLocationFloor] = useState<CabinetLocationFloorDto>();

// Axios
useEffect(() => {
  axiosLocationFloor()
    .then((response) => {
      setLocationFloor(response.data.space_data);
    })
    .catch((error) => {
      console.error(error);
    });
}, []);

// prop 전달
<LocationButton
  locations={locationFloor?.space_data?.map((e) => e.location)}
  currentLocation={currentLocation}
  setCurrentLocation={setCurrentLocation}
/>

// .dto.ts
export interface CabinetLocationFloorDto {
  space_data: Array<object>;
}

• Axios 호출의 결과를 CabinetLocationFloorDto로 정의된 state로 response 받은 후 prop으로 전달하고자 했다.
• object 배열에 map을 적용해 key가 location인 경우만 배열로 새로 받아서 전달하는 과정에서 Property 'location' does not exist on type 'object'.에러가 발생하였다.

원인

• object가 location, floors라는 key를 가진 것인지 type을 정의하기 전에 알 수가 없기때문에 발생한 문제였다.

해결

• 필요한 type이 정의된 object를 dto에 추가하였다.

interface spaceData {
  location: string;
  floors: Array<number>;
}

export interface CabinetLocationFloorDto {
  space_data: Array<spaceData>;
}

• interface를 두 번 정의할 필요없이 spaceData type을 배열로 갖는 interface가 CabinetLocationFloorDto이므로 구조를 수정하여 아래와 같이 사용하였다.

// .dto.ts
export interface CabinetLocationFloorDto {
  location: string;
  floors: Array<number>;
}

// component.ts
const [locationFloor, setLocationFloor] = useState<CabinetLocationFloorDto[]>();

useEffect(() => {
  axiosLocationFloor()
    .then((response) => {
      setLocationFloor(response.data.space_data);
    })
    .catch((error) => {
      console.error(error);
    });
}, []);

<LocationButton
  locations={locationFloor?.map(
    (e: CabinetLocationFloorDto) => e.location
  )}
  currentLocation={currentLocation}
  setCurrentLocation={setCurrentLocation}
/>