Общий тип Typescript для компонента React

Если вы установили @types/react и @types/react-dom, у вас уже будет определено большинство типов реагирования.

Для функциональных компонентов существует тип FunctionComponent или FC для краткости. Он также является общим, поэтому вы можете указать тип реквизита.

import type { FC } from 'react';

const A: FC<{ a: number }> = ({ a }) => <>{a}</>;
const B: FC<{ b: number }> = ({ b }) => <>{b}</>;

type Data = {
  [id: string]: FC<any>;
};

const data: Data = {
  aa: A,
  bb: B,
};

const Usage = () => (
  <>
    A: {data.aa({ a: 12 })}
    B: {data.bb({ b: 'hi' })}
  </>
);

демо: https://stackblitz.com/edit/react-ts-y9ejme?file=App.tsx

Однако обратите внимание, что вы теряете тип реквизита, вводя объект как Data, потому что вы разрешаете любые типы реквизита. Typescript не увидит, что b должен быть числом, а не строкой. Было бы лучше исключить этот тип и просто позволить typescript вывести тип из литерала объекта.

const A: FC<{ a: number }> = ({ a }) => <>{a}</>;
const B: FC<{ b: number }> = ({ b }) => <>{b}</>;

const data = {
  aa: A,
  bb: B,
};

export default function App() {
  return (
    <>
      A: {data.aa({ a: 12 })}
      {/* Error: Type 'string' is not assignable to type 'number'. */}
      B: {data.bb({ b: 'hi' })} 
    </>
  );
}

демо: https://stackblitz.com/edit/react-ts-j8uagi?file=App.tsx

В противном случае вам придется явно ввести свойства:

const A: FC<{ a: number }> = ({ a }) => <>{a}</>;
const B: FC<{ b: number }> = ({ b }) => <>{b}</>;

type Data = {
  aa: typeof A;
  bb: typeof B;
};

const data: Data = {
  aa: A,
  bb: B,
};

export default function App() {
  return (
    <>
      A: {data.aa({ a: 12 })}
      {/* Error: Type 'string' is not assignable to type 'number'. */}
      B: {data.bb({ b: 'hi' })}
    </>
  );
}

демо: https://stackblitz.com/edit/react-ts-ykbq8q?file=App.tsx

Или убедитесь, что свойства, к которым вы обращаетесь, являются общими для всех компонентов:

const A: FC<{ a: number }> = ({ a }) => <>I'm an A {a}</>;
const B: FC<{ a: number, b: number }> = ({ a, b }) => <>I'm a B {a}</>;

type Data = {
  [id: string]: FC<{ a: number }>;
};

const data: Data = {
  aa: A,
  bb: B,
};

export default function App() {
  return (
    <>
      A: {data.aa({ a: 12 })}
      {/* Error: Type 'string' is not assignable to type 'number'. */}
      B: {data.bb({ a: 'hi' })}
      {/* You can pass b here, but it won't be typechecked */}
    </>
  );
}

демо: https://stackblitz.com/edit/react-ts-atcwwh?file=App.tsx

Есть и другие варианты, но это действительно зависит от вашего варианта использования.

Мне нравится то, что Крис Гамильтон упомянул об использовании класса функциональных компонентов из реакции. Я больше читал этот вопрос о том, как работать с универсальными типами typescript с ограничениями. Лучшее, что я мог видеть, — это создать тип объединения AProps и BProps для определения ограничения типа в определении типа данных и использования защиты типов для обеспечения того, что используется в каждой функции данных. Тем не менее, если вы хотите, чтобы это работало для любого типа компонента, это было бы громоздко, потому что вам нужно определить тип объединения для всех возможных компонентов.

type AProps = { a: number };
type BProps = { b: string };

const A = (props: AProps) => <>{props.a}</>
const B = (props: BProps) => <>{props.b}</>

type GenericParams = AProps | BProps;

type Data = {
    [id: string]: <P extends GenericParams>(props: P) => JSX.Element | null
}

const data: Data = {
    aa: (props: GenericParams) => isAProps(props) ? A(props) : null,
    bb: (props: GenericParams) => isBProps(props) ? B(props) : null
}

const Usage = () => (
    <>
        A: {data.aa({ a: 12 })}
        B: {data.bb({ b: 'hi' })}
    </>
)

function isAProps(props: GenericParams): props is AProps
{
    if ("a" in props && typeof props.a === "number")
        return true;

    return false;
}

function isBProps(props: GenericParams): props is BProps
{
    if ("b" in props && typeof props.b === "string")
        return true;

    return false;
}