0
185
ViewsEl objeto es de tipo 'desconocido'.ts(2571) en componente genérico
Tengo un componente Table con genéricos y uso un componente estático dentro de Table para componer columnas, también con genéricos.
El problema es que me gustaría que el componente Columna herede el tipo genérico pasado a la Tabla al ejecutar la función de datos, que obtiene el resultado que se le pasa.
Sé que escribir explícitamente funcionará, por ejemplo:
<Table.Column<TableItem> data={(item) => item.name} />
La verdadera pregunta es: ¿Es posible realizar este tipo de inferencia desde mi componente Tabla y pasarlo al componente Columna estática? Para que no tenga que agregar el tipo explícitamente a cada columna ...
ARENA PARA REPRODUCIR, SOLO COMPONENTES MESA Y COLUMNA:
https://codesandbox.io/s/generic-table-column-r54lh?file=/src/App.tsx
2 answers
Answer question0
Puede especificar el tipo de item :
<Table.Column<TableItem> data={(item:[type goes here]) => item.name} />Algunos ejemplos:
<Table.Column<TableItem> data={(item:any) => item.name} /> // or even <Table.Column<TableItem> data={(item:{name:string;}) => item.name} />0
Hay un problema en la tipificación de children , a saber, que está utilizando ReactElement , que no incluye la tipificación para la función JSX real, solo el elemento devuelto. Puede ver esto en su ejemplo, al notar que los siguientes niños covariantes y contravariantes pasan, a pesar de que sus children escriban:
const MyDiv = (props:{myProp:string})=><div>{props.myProp}</div> const App = () => { return ( <Table<TableItem> keyExtractor={(item) => item.id} values={items}> <Table.Column header="Name" data={(item) => item.name} /> <Table.Column header="Surname" data={(item) => item.surname} /> <MyDiv myProp="me" /> <div /> </Table> ); }; PERO... No creo que ese sea realmente tu problema subyacente. El problema realmente es que desea que Typescript verifique que sus componentes secundarios se creen realmente a través de JSX específico con accesorios específicos, pero, de hecho, todo lo que Typescript hará actualmente es verificar que su JSX devuelva un JSX.Element válido. No verificará que la función que generó ese JSX.Element satisfaga un tipo particular o que el tipo de retorno de esa función sea un tipo específico de elemento con accesorios específicos.
Esta es una limitación de diseño que se analiza en este número abierto .
Creo que podría solucionar esto esencialmente definiendo su propio accesorio personalizado que tomó los accesorios para Table.Column y luego los pasó a Table.Column dentro de su componente Table . Por ejemplo, algo como columnProps: ColumnProps<T> como accesorio de Table . Sin embargo, no estoy seguro de que sea más fácil que simplemente proporcionar el tipo explícito a Table.Column .