Typescript：此重載簽名與其實現簽名不兼容

Question

如果我從返回接口useTabsReturnType中排除setCurrentTab ，則以下代碼有效，但如果我包含它則無效，我不知道為什么

interface useTabsReturnType<T> {
  currentTab: T;
  setCurrentTab: React.Dispatch<React.SetStateAction<T>>;
}

export function useTabs(defaultValues: number): useTabsReturnType<number>;
//This overload signature is not compatible with its implementation signature.ts(2394)
export function useTabs(defaultValues: string): useTabsReturnType<string>;
export function useTabs(defaultValues?: string | number): useTabsReturnType<string | number> {
  const [currentTab, setCurrentTab] = useState(defaultValues || '');

  return {
    currentTab,
    setCurrentTab,
  };
}

編輯：在遵循 Radu Dişă 的建議后，我得到了這個錯誤：

Type 'Dispatch<SetStateAction<string | number>>' is not assignable to type 'Dispatch<SetStateAction<string>> | Dispatch<SetStateAction<number>>'.
  Type 'Dispatch<SetStateAction<string | number>>' is not assignable to type 'Dispatch<SetStateAction<string>>'.
    Type 'SetStateAction<string>' is not assignable to type 'SetStateAction<string | number>'.
      Type '(prevState: string) => string' is not assignable to type 'SetStateAction<string | number>'.
        Type '(prevState: string) => string' is not assignable to type '(prevState: string | number) => string | number'.
          Types of parameters 'prevState' and 'prevState' are incompatible.
            Type 'string | number' is not assignable to type 'string'.
              Type 'number' is not assignable to type 'string'.ts(2322)
useTabs.ts(20, 3): The expected type comes from property 'setCurrentTab' which is declared here on type 'useTabsReturnType<number> | useTabsReturnType<string>'

錯誤來自這里：

return {
  currentTab,
  setCurrentTab,
  ^^^^^^^^^^^^^
};

Answer 1

你為什么不簡單地讓你的useTabs function 是通用的？

export function useTabs<T extends string | number>(defaultValues: T): useTabsReturnType<T> {
  const [currentTab, setCurrentTab] = useState(defaultValues);

  return {
    currentTab,
    setCurrentTab,
  };
}

Answer 2

快速修復是更改 function 實現的return類型。像這樣：

export function useTabs(defaultValues?: string | number): useTabsReturnType<string> | useTabsReturnType<number> {
  const [currentTab, setCurrentTab] = useState(defaultValues || '');

  return {
    currentTab,
    setCurrentTab,
  };
}

重要的部分是： useTabsReturnType<string> | useTabsReturnType<number> useTabsReturnType<string> | useTabsReturnType<number>而不是useTabsReturnType<string | number> useTabsReturnType<string | number>

另一種解決方案是使用type並允許TS分配聯合。 是這樣的：

type useTabsReturnType<T> = T extends any ? {
  currentTab: T;
  setCurrentTab: React.Dispatch<React.SetStateAction<T>>;
} : never

通過此更改，您無需更改 function 的返回類型。