Recibo una matriz de objetos anidados de una llamada API de la que necesito extraer información y agruparla para poder mostrarla en una tabla. Estoy usando for (const [key, value] of Object.entries(result)) para recorrer los resultados. Mi código funciona bien, pero me da un error en la yarn build en el paso en el que intento extraer objetos anidados del value . Actualmente estoy haciendo esto usando la notación de puntos como value.property . Código de muestra :
const result = await HTTPService.get(`myEndpoint/v1`); for (const [key, value] of Object.entries(result)) { name = key; if (value.property1) { myVar = value.myProperty1.subProperty1; } } Error: Property 'myProperty1' does not exist on type 'value'
El result (respuesta de la llamada a la API) se parece a esto:
{ name1: { myProperty1: { subProperty1: [] subProperty2: {} } myProperty2: {} } }Si puede garantizar que la respuesta tendrá esa forma, puede encasillarla usando as palabra clave. Puede crear un tipo personalizado de la forma de la respuesta que obtiene (probablemente puede poner any para cualquiera de las subpropiedades que no le interesan, o simplemente ignorarlas por completo) y encasillarla usando ese tipo.
type MyResType = { name1: { myProperty1: { subProperty1: something[] subProperty2: {...} } myProperty2: {...} } } const result = await HTTPService.get(`myEndpoint/v1`); for (const [key, value] of Object.entries(result as MyResType)) { name = key; if (value.property1) { myVar = value.myProperty1.subProperty1; } }Para que TypeScript detecte que el tipo de value es el tipo de name1 , debe verificar if (key === 'name1') . En el contexto de this if , TypeScript sabrá que el tipo de key es "name1" y luego puede inferir el tipo de result[key] .
interface Result { name1: { myProperty1: { subProperty1: []; subProperty2: {}; }; myProperty2: {}; }; } const result = await HTTPService.get(`myEndpoint/v1`) as Result; for (const key of Object.keys(result) as Array<keyof Result>) { name = key; if (key === 'name1') { const typedValue = result[key]; // works: TS knows that `typedValue`'s type is `{ myProperty1: ..., myProperty2: ... }` myVar = typedValue.myProperty1.subProperty1; } // doesn't work: `key`'s type in this context is `keyof Result` and not specifically `"name1"` const untypedValue = result[key]; myVar = untypedValue.myProperty1.subProperty1; // ~~~~~~~~~~~~ TS2571: Object is of type 'unknown'. });Consulte el ejemplo de zona de juegos de TypeScript .
Puede usar una cadena opcional para evitar ese tipo de error de verificación.
for (const [key, value] of Object.entries(result as MyResType)) { name = key; if (value?.property1) { myVar = value.myProperty1.subProperty1; } }Como la respuesta de la API es desconocida en el lado de la interfaz. Y podría agregar el tipo de verificación de la respuesta.
Si está seguro del tipo de respuesta, puede definir su tipo de respuesta.
type ResultType = { name1: { myProperty1: { subProperty1: Array<any> subProperty2: {} } myProperty2: {} } } const result = await HTTPService.get<ResultType>(`myEndpoint/v1`);