Typescript with React, infer type of array passed as prop-CodePudding

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>

CodePudding user response：

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>
      ))}
    </>
  )
}

CodePudding user response：

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.