在 Typescript React Application 中获取“此表达式不可调用”

Question

我正在尝试将我的逻辑与 Typescript React 应用程序中的布局组件分开，但我认为我的控制器返回对象的返回类型有问题。

我尝试了以下方法来制作一个指示返回type但打字稿抱怨的类型

controller.tsx ，我得到了：

TS2322：类型 '() => { iconsList: floatingNavbarItem[]; 值：字符串； handleChange: (event: SyntheticEvent, newValue: string) => void; }' 不可分配给类型“ControllerFN”。

type ControllerFN = {
    iconsList: floatingNavbarItem[];
    value: string;
    // eslint-disable-next-line no-unused-vars
    handleChange: (event: SyntheticEvent, newValue: string) => void;
};

const floatingNavbarController: ControllerFN = () => {
  const [value, setValue] = useState('addPlan');

  const handleChange = (event: SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  const iconsList:floatingNavbarItem[] = useMemo(
    () => [
      {
        value: 'addPlan',
        label: 'addPlan',
        icon: <FontAwesomeIcon icon={faCirclePlus} />,
      },
    ],
    [],
  );

  return { iconsList, value, handleChange };
};

浮动导航栏.jsx

const FloatingNavbar: FunctionComponent = () => {
  const { iconsList, value, handleChange } = floatingNavbarController();
  return (
    <Navbar
      value={value}
      onChange={handleChange}
    >
      <FloatingNavbarItem iconsList={iconsList} />
    </Navbar>
  );
};

我在这里得到：

TS2349：此表达式不可调用。 类型“ControllerFN”没有调用签名。

当我调用 floatingNavbarController(); 在第 2 行

和

TS2322：类型'{图标列表：任何； }' 不可分配给类型 'IntrinsicAttributes & floatingNavbarItem[]'。 类型“IntrinsicAttributes & floatingNavbarItem[]”上不存在属性“iconsList”。

在第 8 行的 props iconsList

我究竟做错了什么？ 有任何想法吗？

Answer 1

通过编写const floatingNavbarController: ControllerFN ，您是在说变量floatingNavbarController的类型为ControllerFN 。

但这不是真的 - floatingNavbarController是一个返回ControllerFN的函数。

我认为您正在寻找的是：

type ControllerFN = () => {
    iconsList: floatingNavbarItem[];
    value: string;
    // eslint-disable-next-line no-unused-vars
    handleChange: (event: SyntheticEvent, newValue: string) => void;
};

const floatingNavbarController: ControllerFN = () => {
// ...