@hamster141095

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

Создаю компонент 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>
  );
};
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега TypeScript
Crazy on performance...
Попробуйте поправить так:
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 напротив каждого поля
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы