如何使用“函数”语法而不是“常量”添加类型FunctionComponent以反应函数组件？

Question

这工作罚款：

import React, { FunctionComponent } from "react";
const Counter: FunctionComponent = () => <div>hello from Counter</div>;
export default Counter;

这有一个编译错误：

import React, { FunctionComponent } from "react";
function Counter1(): FunctionComponent {
  return <div>hello from Counter1</div>;
}
export default Counter1;

错误表示：

类型“Element”不可分配给类型“FunctionComponent”

如何使用“函数”语法编写FunctionComponent类型的函数组件？

Answer 1

可以使用与函数同名的接口。

interface Counter extends FunctionComponent {}
function Counter() {
  return <div>hello from Counter1</div>;
}

Answer 2

在里面

const Counter: FunctionComponent = () => <div>hello from Counter</div>;

计数器的类型为FunctionComponent。这是期望的行为。但在：

function Counter(): FunctionComponent {
  return <div>hello from Counter1</div>;
}

计数器的类型是一个函数，它返回的函数组件不是您想要的，并且不符合函数定义。

如果你绝对想使用函数，你可以这样写：

const Counter: FunctionComponent = function() {
  return <div>hello from Counter1</div>;
}