Typescript Parameter Object Destructuring

Question

I am getting a Typescript error for props.className below:

type PropsType = {
  handleChange?: Function;
  props?: { [key: string]: any };
};

export default function Search({ handleChange, ...props }: PropsType) {
  return (
    <div className={`search-bar flex middle ${props.className ?? ""}`}>
      <div className="search-icon flex middle">
        <svg>
          <use href="#search-icon" />
        </svg>
      </div>
      <input placeholder="Search" size={1} />
    </div>
  );
}

I get the error "Property 'className' does not exist on type '{ props?: { [key: string]: any; } | undefined; }'" but that's to be expected since I'm spreading the rest of the parameters in, right? I just want to add the className to the element if it's there (in props).

For additional info, I'm converting this Component to Typescript and am using Next.js 13 (experimental).

Answer 1

To pass any props to a component, the string signature should be defined as the following:

type PropsType = {
    handleChange?: Function;
    [key: string]: any
};

This makes you code work but not suggest because it disable all type checks.

---

And in my opinion, className is a known property so it should be explicitly defined:

type PropsType = {
    handleChange?: Function;
    className?: string;
};