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

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