Typescript React: How to declare types for specific element which is Props

Viewed 65

I want to declare types for specific element something like <button> or <input>. but, I can't check specific element with type

Heres example,

interface Props{
  component: React.ComponentProps<"button"> | never;
};

const TestComponent = (props: Props) =>{
  const {component} = props;
  return <div>{component}</div>
}

const OnlyButtonComponent = () => {
  return(
    <>
      {/** This will be Okay. */}
      <TestComponent component={<button>its button</button>} />
      {/** This must occur error */}
      <TestComponent component={<div>its not button</div>} />
    </>
  )
}

BUT, both of TestComponent is rendered with no errors.

How i can guard this with type declare?

1 Answers

Try this

interface Props{
  component: React.ReactNode
};
Related