function-declaration.tsx

// how do I write this:
const Profile: React.FunctionComponent<ProfileProps> = ({ userId, navigate }) => {
  console.log(navigate);
  return <div>{userId}</div>;
}

// as this:
function Profile({ userId, navigate }) {
  console.log(navigate);
  return <div>{userId}</div>;
}
  
// I tried this:
function Profile({ userId, navigate }): React.FunctionComponent<ProfileProps> {
  console.log(navigate);
  return <div>{userId}</div>;
}
  
// and this:
function Profile<React.FunctionComponent<ProfileProps>>({ userId, navigate }){
  console.log(navigate);
  return <div>{userId}</div>;
}

// neither work.

// Also we can't just do function Profile(props: ProfileProps) {}
// because Profile can be passed to a HOC or a "component" prop
// and w/o the React.FunctionComponent stuff it fails the type checking
// on React.ComponentType

Maybe need to use an as to force it's hand to cover both use cases, something like:

interface ProfileProps { ... }

function Profile({ userId, navigate }: ProfileProps) {
  console.log(navigate);
  return <div>{userId}</div>;
} as React.FC<ProfileProps>;

I stumbled over this a few days ago, too. The typings come from DefinitelyTyped and require you to define a children prop. I think @sunify got it quite right, but I don't think that you need the as React.FC<ProfileProps>; part. The correct return type is React.ReactNode, but it should be infered.

type ProfileProps = {};

export default function Profile(
  props: ProfileProps & { children?: React.ReactNode }
) {
  return <div />;
}

If you do not want to allow children you can type children as undefined_

type ProfileProps = {};

export default function Profile(
  props: ProfileProps & { children?: undefined }
) {
  return <div />;
}

Looking at the types I think the children definition of DefinitelyTyped is to strict. As far as I understand them, they also disallow components with render props as children.

const Profile: React.FC<ProfileProps> = ({ navigate, userId }: ProfileProps) => {
  console.log(navigate);
  return <div>{userId}</div>;
}

in my last project using Typescript with React I used this one

const Profile: React.FunctionComponent<ProfileProps> = function Profile({ userId, navigate }) {
  console.log(navigate);
  return <div>{userId}</div>;
}

Also works, even though that's probably not what you want to do. From what I can tell, tsx doesn’t see to let you cast that function declaration using the prefix syntax.

@artisonian nice solution