类型'IntrinsicAttributes & UserSelectProps & { children?: ReactNode; 上不存在属性'isMulti' }'.ts(2322)

Question

I have a component which looks like so:

      <Controller
        name="members"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          <UserSelect
            accountId={accountId}
            label="Project Members"
            isMulti
            {...field}
          />
        )}
      />

and it is giving me the following TS error (red squiggly on isMulti ):

Type '{ onChange: (...event: any[]) => void; onBlur: Noop; value: any; name: "members"; ref: RefCallBack; accountId: string; label: string; isMulti: true; }' is not assignable to type 'IntrinsicAttributes & UserSelectProps & { children?: ReactNode; }'. Property 'isMulti' does not exist on type 'IntrinsicAttributes & UserSelectProps & { children?: ReactNode; }'.ts(2322)

full component can be seen here:https://gist.github.com/pivcec/ea9714410f2baaaf9600a28091e9f6b7

UserSelect component can be seen here:https://gist.github.com/pivcec/cb2645bf672324f990b27f6cd597dfcc

Answer 1

If you want to extend another component you can just intersect the props of Select. I believe this is from react-select , but the simplest way to it would be like so:

type UserSelectProps = {
  accountId: string;
  label: string;
} & Parameters<typeof Select>[0];
// need to index 0, since that is props, 1 is context

Also react.forwardComponent is a generic component so the correct pattern would be something like this:

const UserSelect = React.forwardRef<UserSelectProps["ref"], Omit<UserSelectProps, "ref>">((props, ref) => {
  //...
})
// the first type parameter is the refType and the second is the propsType

IIRC react-select props type is generic, so this might be more useful like so:

import { GroupBase } from "react-select";

type UserSelectProps<
  Option = unknown,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
> = {
  accountId: string;
  label: string;
  // This requires TS4.7^ VVV, instantiation expression
} & Parameters<typeof Select<Option, IsMulti, Group>[0];

// Since you didn't provide a sandbox I just wrote this of the top of my head,
// so this may or may not work...
const UserSelect = React.forwardRef(...) as <
  Option = unknown,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>(props: UserSelectProps<Select, IsMulti, Group>) => JSX.Element