reactjs - TypeScript | No se puede iterar sobre un objeto de tipo personalizado

Estoy tratando de devolver un par [clave, valor] de un objeto de datos de respuesta personalizado, pero cuando intento recorrer cada clave[valor], me da este error:

No se encontró una firma de índice con un parámetro de tipo 'string' en el tipo 'IResponse'

o

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IResponse'

aquí está mi Detail.tsx:

interface IResponse {
  birth_year: string;
  created: string;
  edited: string;
  eye_color: string;
  films: string[];
  gender: string;
  hair_color: string;
  heigth: string;
  homeworld: string;
  mass: string;
  name: string;
  skin_color: string;
  species: string[];
  startships: string[];
  url: string;
  vehicles: string[];
}

const Detail = () => {
  const [person, setPerson] = useState<IResponse>({} as IResponse);
  const { id } = useParams();

  useEffect(() => {
    api.get(`people/${id}`).then((res) => {
      if (res.data) setPerson(res.data as IResponse);
    });
  }, [id]);

  function printValues() {
    return Object.keys(person).map((key) => (
      <li>
        {key}:{person[key]}
      </li>
    ));
  }

  return <ul>{printValues()}</ul>;
};

Mi pregunta es: ¿Por qué este código:

function objectEntries() {
    const a = "name";
    const entries = person[a];
    console.log(entries);
  }

  objectEntries();

¿Funciona bien y en la función printValues no?

Respuesta #1

Veo dos problemas diferentes aquí. Primero, tienes que llamar a print values return <ul>{printValues()}</ul>. Segundo, no estás manejando cuando person.data está vacío en el primer renderizado antes de que se obtengan los datos.

Actualización después del comentario: Está bien, ya que tienes estos, la manera real de arreglar el error de tipo es así

    let key: keyof IResponse['data'];
    for (key in person.data) {

El problema es que no tienes ninguna clave de tipo cadena. Así que necesitas decir que estás usando las claves de ese objeto

Si no te gusta esa sintaxis, siempre puedes usar lo siguiente en su lugar

for (let [key, value] in Object.entries(person.data))

Respuesta #2

¡Solo necesito decirle a TypeScript que el objeto puede acceder a un [key: string]: value: any en la interfaz IResponse!

como :

interface IResponse {
  [key: string]: your-value-type
  [...]
}