Получение ошибки «нельзя назначить типу» на компоненте реакции, как я могу лучше понять это?

Question

Я создаю этот компонент для тестирования библиотеки реагирующих пружин.Я запустил его на codesandbox, а затем вытащил локально на мой компьютер.Когда я его вытащил, возникла эта ошибка, и я не уверен, как ее интерпретировать или что ее вызывает.Я довольно новичок в машинописи, поэтому любая помощь очень ценится.

Сначала я думал, что это может быть неправильный тип для children prop, но потом понял, что на самом деле это width и height, теперьЯ не уверен, что это styled-components (так как ошибка появляется в StyledCard) или если вы используете метод рендеринга для детей, вы должны указать свои типы по-другому ..

import * as React from "react"
import styled from "styled-components"

const StyledCard = styled.div`
  width: ${(props: any) => props.width}px;
  height: ${(props: any) => props.height}px;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
`

interface ICardProps {
  children?: React.ReactNode
  width?: number
  height?: number
}

const Card: React.FC<ICardProps> = ({ width, height, children }) => {
  return (
    <StyledCard width={width} height={height}>
      {children}
    </StyledCard>
  )
}

export default Card

Этоя получаю ошибку:

Type '{ children: ReactNode; width: number | undefined; height: number | undefined; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | "key" | "defaultChecked" | "defaultValue" | ... 246 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 251 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 251 mor...'.
  Property 'width' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | "key" | "defaultChecked" | "defaultValue" | ... 246 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 251 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 251 mor...'.ts(2322)

Answer 1

Чтобы Typescript знал, какие пользовательские реквизиты вы собираетесь передать своему стилизованному div, вам нужно сообщить об этом с помощью параметра типа, подобного этому:

interface StyledCardProps {
    width?: number
    height?: number
}

const StyledCard = styled.div<StyledCardProps>`
    // your css here
`