Can't assign specific type as an argument to a generic

I am trying to set an interface where I can pass arguments without specifying its type.

// Wrapper.tsx
interface Props extends MenuProps, ChakraProps {
  handleTagClick: <T>(args?: T) => void
}

export const Wrapper: FC<Props> = ({ handleTagClick }): JSX.Element => {
  return(
    <Button 
       {...(
          handleTagClick && { 
            onClick: () => handleTagClick({ ...dummyQuestion, type }) })
       }
    />
  )
}

Then I call that component where the error comes:

export const Container = () => {

  const { addNewThing } = useMyHook()

  // The error comes from this line
  return <Wrapper handleTagClick={addNewThing} />
}

The error:

Type '(question: VariableConfig) => void' is not assignable to type '<T>(args?: T | undefined) => void'.
  Types of parameters 'question' and 'args' are incompatible.
    Type 'T | undefined' is not assignable to type 'VariableConfig'.
      Type 'undefined' is not assignable to type 'VariableConfig'.
Wrapper.tsx(10, 3): The expected type comes from property 'handleTagClick' which is declared here on type 'IntrinsicAttributes & Partial<Props> & { children?: ReactNode; }'

What am I doing wrong?

21 thoughts on “Can't assign specific type as an argument to a generic”

Leave a Comment