如何使 React Function 推断出 typescript 类型？

Question

I'm kinda new to typescript, I cannot say that I'm loving it, but as I'm doing a library it was a good idea to test it a little more.

I'm having a problem typing a Function, I tried with generic types with no success. Basically, I have a component that receives a list and an onRender function.

import React from 'react';

export default function Iterator<ItemsOnListType>(
  props: IteratorPropTypes<ItemsOnListType>,
) {
  const { list, onRender } = props;
  return <>{list.map(onRender)}</>;
}

Its types:

interface IteratorPropTypes<T> {
  list: Array<T>;
  onRender: (prop: T, index: number, originalList: Array<T>) => JSX.Element;
}

But, on its test file, the prop and index are not typed, they show any type. I want a good fix for this problem, I'm probably missing something, I basically want that onRender props work like the Array.map function that can infer its type from the array. The code is available here https://github.com/WilliamCSA04/React-Useful-Components/tree/master/src/components/Iterator

Thank you.

Answer 1

From what I see, you just forget to export your type and import it in Iterator.tsx. Although there is no error, IteratorPropTypes is actually pointing to global namespace which is not correct.

Iterator.type.ts

export interface IteratorPropTypes<T> { // export type
  list: Array<T>;
  onRender: (prop: T, index: nzumber, originalList: Array<T>) => JSX.Element;
}

Iterator.tsx

import React from 'react';
import { IteratorPropTypes } from './Iterator.types'; // import type

export default function Iterator<ItemsOnListType>(
  props: IteratorPropTypes<ItemsOnListType>,
) {
  const { list, onRender } = props;
  return <>{list.map(onRender)}</>;
}