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

@artisonian nice solution