Как описать типы в данном компоненте React?

Question

[hamster141095]

Создаю компонент Typography - который в prop's принимает его вариант (h2,h1, p и т.д.), но не могу описать типы для возвращаемого компонента, пишет, что string - Property 'children' does not exist on type 'IntrinsicAttributes'.
P/s Где = any = там не могу описать тип

import React from 'react';
import classNames from 'classnames';
import { TypographyType, TypographyTypeStyle } from './types/types';

import './typographyStyle.scss';

interface ITypography {
  variant: TypographyTypeStyle;
  children: React.ReactChild;
}

const Typography: React.FC<ITypography> = ({ variant, children, ...props }) => {
  const Component: any= TypographyType[variant];
  return (
    <Component
      className={classNames({
        typography: true,
        [`typography__variant_${variant}`]: variant,
      })}
      {...props}
    >
      {children}
    </Component>
  );
};

export default Typography;

Типизация вариантов

export enum TypographyTypeStyle {
  h1 = 'h1',
  h2 = 'h2',
  h3 = 'h3',
  h4 = 'h4',
  p1 = 'p1',
  p2 = 'p2',
}

export const TypographyType = {
  [TypographyTypeStyle.h1]: 'h1',
  [TypographyTypeStyle.h2]: 'h2',
  [TypographyTypeStyle.h3]: 'h3',
  [TypographyTypeStyle.h4]: 'h4',
  [TypographyTypeStyle.p1]: 'p',
  [TypographyTypeStyle.p2]: 'p',
};

Использование

<Typography variant={TypographyTypeStyle.h4}>Text 4</Typography>

Пробовал и React.ReactChild, пишет, что string не относится к React.Child, а когда в ручную пишу к типам проблем нет

const Typography: React.FC<ITypography> = ({ variant, children, ...props }) => {
  const Component= 'h1';
  return (
    <Component
      className={classNames({
        typography: true,
        [`typography__variant_${variant}`]: variant,
      })}
      {...props}
    >
      {children}
    </Component>
  );
};

Answer 1

[Дмитрий Беляев]

Попробуйте поправить так:

export const TypographyType = {
  [TypographyTypeStyle.h1]: 'h1',
  [TypographyTypeStyle.h2]: 'h2',
  [TypographyTypeStyle.h3]: 'h3',
  [TypographyTypeStyle.h4]: 'h4',
  [TypographyTypeStyle.p1]: 'p',
  [TypographyTypeStyle.p2]: 'p',
} as const;

as const зафиксирует литеральные типы на объекте, правда сам объект сделает readonly, если это не устраивает, то можно писать as const напротив каждого поля

Comments

[hamster141095]

Хвала Богам!! Вы гений! как всегда выручили, спасибо))