при попытке определить функциональный компонент в реакции со стилями-компонентами с использованием машинописного текста получить ошибку «Нет перегрузки, соответствующей этому вызову».

Question

Песочница https://codesandbox.io/s/typescript-type-checking-question-0b42t

Код

type BadgeTypes = {
  success: string;
  secondary: string;
  alert: string;
  text: string;
};

type Theme = {
  fonts?: object;
  borderRadius: string;
  primary?: object;
  accent?: object;
  action?: object;
  stories?: object;
  checkbox?: object;
  badge: BadgeTypes;
  button?: object;
  page?: object;
  states?: object;
  modal?: object;
};
interface Props {
  theme: Theme;
  large: boolean;
  type: keyof BadgeTypes;
}
const StyledBadge = styled.span<Props>`
  display: inline-block;
  border-radius: ${(props: Props): string => props.theme.borderRadius};
  text-align: center;
  color: ${(props: Props): string => props.theme.badge.text};
  font-size: ${(props: Props): string => (props.large ? `1.4rem` : `1rem`)};
  padding: ${(props: Props): string =>
    props.large ? `0 .8rem` : `0.2rem 0.6rem 0.3rem 0.6rem`};
  background: ${(props: Props): string => props.theme.badge[props.type]};
`;
interface BadgeProps {
  children: React.ReactChildren;
  // any other props that come into the component
}

const Badge = ({
  children,
  ...props
//problem likely the line below
}: BadgeProps): React.FunctionComponentElement<BadgeProps> => (
  <StyledBadge {...props}>{children}</StyledBadge>
);

Ошибка:

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | ... 253 more ... | "is"> & { ...; } & Props, "slot" | ... 258 more ... | "large"> & Partial<...>, "slot" | ... 257 more ... | "large"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: ReactChildren; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | ... 253 more ... | "is"> & { ...; } & Props, "slot" | ... 258 more ... | "large"> & Partial<...>, "slot" | ... 257 more ... | "large">': type, large
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"span", any, Props, never>): ReactElement<StyledComponentPropsWithAs<"span", any, Props, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: ReactChildren; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | ... 253 more ... | "is"> & { ...; } & Props, "slot" | ... 258 more ... | "large"> & Partial<...>, "slot" | ... 257 more ... | "large">': type, largets(2769)

Я знаю, что это, вероятно, результат неправильный тип возвращаемого значения функции, который я поместил туда после BadgeProps): Но я не могу найти правильный тип для вставки после нескольких поисков в Google.

Answer 1

Это больше про ваш BadgeProps, они никак не связаны с Props. А поскольку StyledBadge имеет свойства типа Props, TypeScript будет кричать!

Чтобы исправить это, я сделал небольшую песочницу с необходимыми исправлениями .

Я также внесены небольшие изменения в способ объявления компонента Badge :)