用名称键入功能组件

Question

使用TypeScript声明React函数组件的新方法似乎是（选项1）：

interface IProps {
  bar: string;
}

const Foo: React.FC<IProps> = ({ bar }) => <div>{bar}</div>;

export default Foo;

但是使用匿名箭头功能，有人认为这会使调试更加困难。

选项2为：

export default function Foo({ bar }: IProps): JSX.Element {
  return <div>{bar}</div>;
}

选项3非常冗长，但确实包含“正式”类型：

function InternalFoo({ bar }: IProps): JSX.Element {
  return <div>{bar}</div>;
}

const Foo: React.FC<IProps> = InternalFoo;

export default Foo;

可能还有其他选择。

什么是惯用/首选选项，为什么？