Typescript type is missing the following properties while props are defined as optional

Baspa 0
Viewed 29

I defined the properties in my index.tsx like this:

interface Props {
  uuid: string
  cdn?: string
  filename?: any
  classname?: any
  [key: string]: any
}

export const UCImage = ({
  uuid,
  cdn = 'https://ucarecdn.com/',
  filename,
  classname,
  ...props
}: Props) => {
  // ...
}

And I add the component like this in my App.tsx:

const App = () => {
  return (
    <UCImage
      uuid='83c3bad4-b4bc-4cea-8702-88ee61b0b015'
      preview={{ width: 300, height: 300 }}
      setFill={{ color: 'ff0000' }}
    />
  )
}

Somehow I still get the error:

Type '{ uuid: string; preview: { width: number; height: number; }; setFill: { color: string; }; }' is missing the following properties from type 'Props': filename, classname

while the filename and classname are both optional parameters. Anyone with more experience in Typescript that can tell me why this doesn't work?

reactjs typescript
1 Answers

There is a another way of defining type for a functional component, instead of assigning the Props interface to the component parameters you can use the React.FC Class as a type.

export const UCImage: React.FC<Props> = ({uuid, cdn, filename, classname,
...props}) => {
    //...
}

maybe this will solve your problem.

Daksh Lohar0
Related