I'm trying to separate my logic from my layout component in a Typescript React Application, but I think there's something wrong with the return type of my controller return object.

I tried the following to make a type which indicates which is the return type but typescript is complaining

controller.tsx, here i got:

TS2322: Type '() => { iconsList: floatingNavbarItem[]; value: string; handleChange: (event: SyntheticEvent, newValue: string) => void; }' is not assignable to type '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 };
};

floatingNavbar.jsx

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

Here I got:

TS2349: This expression is not callable.   Type 'ControllerFN' has no call signatures.

when I call floatingNavbarController(); at line 2

and

TS2322: Type '{ iconsList: any; }' is not assignable to type 'IntrinsicAttributes & floatingNavbarItem[]'.   Property 'iconsList' does not exist on type 'IntrinsicAttributes & floatingNavbarItem[]'.

at props iconsList at line 8

What am I doing wrong? Any ideas?

CodePudding user response：

By writing const floatingNavbarController: ControllerFN, you're saying that the variable floatingNavbarController has the type ControllerFN.

But that's not true - floatingNavbarController is a function that returns ControllerFN.

I think what you're looking for is this:

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

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