Typescript with React, infer type of array passed as prop

Question

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>

FunkyT · Accepted Answer · 2022-06-03 21:12:42Z

1

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

answered Jun 3, 2022 at 21:12

FunkyT

464 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman Bova · Accepted Answer · 2022-06-03 21:16:44Z

1

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.

answered Jun 3, 2022 at 21:16

Roman Bova

544 bronze badges

Collectives™ on Stack Overflow

Typescript with React, infer type of array passed as prop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related