CODEWITHSUNDEEP
javascriptreactjstypescripttypescript-typings
FunkyT
FunkyT

Reputation: 46

Typescript with React, infer type of array passed as prop

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>

Upvotes: 1

Views: 797

Answers (2)

Roman Bova
Roman Bova

Reputation: 54

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.

Upvotes: 1

FunkyT
FunkyT

Reputation: 46

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

Upvotes: 1

Related Questions