Tengo el siguiente componente React que genera una tabla HTML a partir de una matriz de objetos. Las columnas que deben mostrarse se definen a través de la propiedad tableColumns .
Al recorrer items y mostrar las columnas correctas, tengo que usar la propiedad key del objeto tableColumn ( {item[column.key]} ), pero TypeScript genera el siguiente error:
El elemento tiene implícitamente un tipo 'cualquiera' porque la expresión de tipo 'cadena' no se puede usar para indexar el tipo '{}'. No se encontró ninguna firma de índice con un parámetro de tipo 'cadena' en el tipo '{}'.
¿Qué podría hacer para arreglar esto? Estoy perdido
Cómo llamo al componente:
<TableGridView items={[ { id: 1, name: 'John Doe', email: 'john@doe.de' }, { id: 2, name: 'Lorem ipsum', email: 'lorem@ipsum.com', } ]} tableColumns={[ { key: 'id', label: 'ID', }, { key: 'name', label: 'Name', } ]} />Mi componente:
export type TableColumn = { key: string, label: string, }; export type TableGridViewProps = { items: object[], tableColumns: TableColumn[] }; const TableGridView: React.FC<TableGridViewProps> = ({ tableColumns, items }) => { return ( <table> <tbody> {items.map(item => { return ( <tr> {tableColumns.map((column, index) => { return ( <td key={column.key} className="lorem ipsum" > {item[column.key]} // error thrown here </td> ); })} </tr> ); })} </tbody> </table> ); } items: object[], Aunque técnicamente es un objeto de JavaScript, el tipo puede ser mejor. Para que Typescript lo ayude correctamente a identificar errores al acceder a las propiedades de los objetos, debe indicarle la forma exacta del objeto. Si lo escribe como object , mecanografiado no puede ayudarlo con eso. En su lugar, podría decirle las propiedades exactas y los tipos de datos que tiene el objeto:
let assistance: { safe: string } = { safe: 1 /* typescript can now tell this is wrong */ }; assistance.unknown; // typescript can tell this wont really work tooAhora, en el caso de que el objeto pueda contener cualquier tipo de par clave/valor, al menos puede decirle a TypeScript qué tipo tienen los valores (y las claves), utilizando un tipo de índice de objeto:
items: { [key: string]: number | string, }[]Ese sería el tipo exacto en el caso dado.
Usar genéricos
// bad const _getKeyValue = (key: string) => (obj: object) => obj[key]; // better const _getKeyValue_ = (key: string) => (obj: Record<string, any>) => obj[key]; // best const getKeyValue = <T extends object, U extends keyof T>(key: U) => (obj: T) => obj[key]; Incorrecto: el motivo del error es que el tipo de object es solo un objeto vacío de forma predeterminada. Por lo tanto, no es posible usar un tipo de string para indexar {} .
Mejor: la razón por la que desaparece el error es porque ahora le estamos diciendo al compilador que el argumento obj será una colección de pares cadena/valor ( string/any ). Sin embargo, estamos usando any tipo, por lo que podemos hacerlo mejor.
Óptimo - T extiende el objeto vacío. U extiende las claves de T . Por lo tanto, U siempre existirá en T , por lo tanto, puede usarse como un valor de búsqueda.
Aquí hay un ejemplo completo:
Cambié el orden de los genéricos ( U extends keyof T ahora viene antes de T extends object ) para resaltar que el orden de los genéricos no es importante y debe seleccionar el orden que tenga más sentido para su función.
const getKeyValue = <U extends keyof T, T extends object>(key: U) => (obj: T) => obj[key]; interface User { name: string; age: number; } const user: User = { name: "John Smith", age: 20 }; const getUserName = getKeyValue<keyof User, User>("name")(user); // => 'John Smith'Si es un objeto javascript pedante para el que no tiene sentido crear definiciones de tipo por campo, y no tiene sentido como una definición de clase, puede escribir el objeto con any y mecanografiado le permitirá indexar como desee.
ex.
//obviously no one with two brain cells is going to type each field individually let complicatedObject: any = { attr1: 0, attr2: 0, ... attr999: 0 } Object.keys(complicatedObject).forEach(key => { complicatedObject[key] += 1; }