I have this component:
import React from 'react'
export interface IForEachProps {
each: any[]
children: <T>(item: T, index: number) => JSX.Element
given?: boolean
key?: (item: any) => any
}
export const For: React.FC<IForEachProps> = ({ each, children, key, given = true }) => {
if (!given) return null
return (
<>
{each.map((item, index) => (
<React.Fragment key={key ? key(item) : index}>{children(item, index)}</React.Fragment>
))}
</>
)
}
I have been unsuccessful in my attempts to infer the type of the each prop, as this could be any array. What I want, looking at the example below is for the compiler to infer from the input array that the parameter in the callback is in fact a string.
const list: string[] = ['hello']
<For each={list}>
{(item) => (
<div>{item.length}</div>
)}
</For>
Solved it. Had to convert the component into a function component in order to be able to properly use generics.
import React from 'react'
export interface IForEachProps<T> {
each: Array<T>
children: (item: T, index: number) => JSX.Element
given?: boolean
key?: (item: any) => any
}
export function For<T>({ each, children, key, given = true }: IForEachProps<T>) {
if (!given) return null
return (
<>
{each.map((item, index) => (
<React.Fragment key={key ? key(item) : index}>{children(item, index)}</React.Fragment>
))}
</>
)
}
Sure thing it doesn't work. TS sees that there is a straight role each: any[]. That means "forget anything you know about that type". To make this working you have to provide generic types for this interface. Thus you will force TS to find the exact type of this array:
export interface IForEachProps<Item> {
each: Array<Item>
children: (item: Item, index: number) => JSX.Element
given?: boolean
key?: (item: Item) => string | number
Also I highly recommend to avoid "any" type. It always ruins the core idea of the Typescript.