#Why does React.FC<Props> not set the function's first argument type to Props?

7 messages · Page 1 of 1 (latest)

errant coral
#

In this example, why does Foo type error, but Bar does not? I know we don't need React.FC, I'm more interested in why this happens?

type ExampleProps = { record?: Object }

// type error
const Foo: FC<ExampleProps> = ({ record }) => {
  return <></>;
};

// okay
const Bar: FC<ExampleProps> = ({ record }: ExampleProps) => {
  return <></>;
};
supple jay
#

i'm not getting a type error? can you reproduce your error in the playground

errant coral
#

@supple jay I'm thinking my @types packages are messed up. My packages.json specifies @types/react as 18.2.0, but my yarn.lock has both an 18.2 @types/react and a 17.0 @types/react

#

How does typescript handle multiple versions of the same @types package installed?

supple jay
#

no clue tbh

errant coral
#

Solved, this one was user error. There was some code extending the FunctionComponent interface copied into the project that was breaking things.

declare module 'react' {
  interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  }
}
#

!resolved