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

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

like this?

Nope, I get this:

Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>'

Have you tried JSX.Element instead of React.FunctionComponent and keeping ProfileProps on object destructuring?

Ugly, but should work:

type ProfileProps = {};

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

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