CODEWITHSUNDEEP
reactjstypescript
Slbox
Slbox

Reputation: 13108

Understanding TS2345: "Argument of type 'typeof MyComponent' is not assignable to parameter of type"

We're trying to wrap a Typescript React component in react-onclickoutside - but when we do so, we get the error:

TS2345: Argument of type 'typeof MyComponent' is not assignable to parameter of type 'ComponentConstructor<Props & InjectedOnClickOutProps & HandleClickOutside<any>> | ClickOutComponentClass<Props & InjectedOnClickOutProps>'.
  Type 'typeof MyComponent' is not assignable to type 'ComponentClass<Props & InjectedOnClickOutProps & HandleClickOutside<any>, any>'.
    Construct signature return types 'MyComponent' and 'Component<Props & InjectedOnClickOutProps & HandleClickOutside<any>, any, any>' are incompatible.
      The types of 'props' are incompatible between these types.
        Type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<Props & InjectedOnClickOutProps & HandleClickOutside<any>> & Readonly<{ children?: ReactNode; }>'.
          Type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>' is missing the following properties from type 'Readonly<Props & InjectedOnClickOutProps & HandleClickOutside<any>>': disableOnClickOutside, enableOnClickOutside, handleClickOutside

Our failing code is like this:


class MyComponent extends React.PureComponent<Props, State> {
  //  ...
}

export const WithOnClickOutside = onClickOutside(MyComponent);

We have @types/react-onclickoutside installed; I'm not sure what else I need to do to get this working.

I'm a Typescript noob, so please let me know if there's additional context needed that I've failed to provide.

Upvotes: 0

Views: 1929

Answers (1)

Antonio Gargaro
Antonio Gargaro

Reputation: 106

The property definitions are missing from your class, try updating the props type of your component to include the intersection of the types it asks for.

class MyComponent extends React.PureComponent<Props & InjectedOnClickOutProps & HandleClickOutside<any>, State> {

Upvotes: 1

Related Questions