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

This should work. Also. It’s I’m typing this on my phone.

function Profile({ userId, navigate }: Props): React.ReactNode {
  return <div>{userId}</div>
}

React.FunctionComponent<ProfileProps> is just a (props: ProfileProps) => null | ReactElement<any>,
so

function Profile({ userId, navigate }: ProfileProps): ReactElement<any> { // Sometimes `null | ReactElement<any>` if you want to return `null`
  console.log(navigate);
  return <div>{userId}</div>;
}

Also when you return jsx code, TypeScript automatically assumes that this is a ReactElement<any>, so this would be enough in most cases: Nevermind, missed HOCs part.

I stop using them long time ago, if nothing else works, I would do like this:

const enhancer = hoc(Profile as ComponentType<ProfileProps>)

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

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