使用 Typescript 在 React 中將 function 作為具有不同參數類型的道具傳遞

Question

我正在嘗試通過 function 更新 React 中的 state，但是 VSCode 警告我輸入問題。 錯誤是Type '(value: string) => void' is not assignable to type '(value: string | number) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'. Type '(value: string) => void' is not assignable to type '(value: string | number) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'. 或Type '(value: number) => void' is not assignable to type '(value: string | number) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'string | number' is not assignable to type 'number'. Type 'string' is not assignable to type 'number'. Type '(value: number) => void' is not assignable to type '(value: string | number) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'string | number' is not assignable to type 'number'. Type 'string' is not assignable to type 'number'.

這是在這個代碼塊中：

<DropDownSelect
        options={blogTags}
        selectedOption={selectedBlogTag}
        allPosition="top"
        updateFunc={updateSelectedBlogTag}
      />
      <DropDownSelect
        options={["5", "10", "20", "50"]}
        selectedOption={selectedArticleCount}
        hideAll={true}
        updateFunc={updateArticleCount}
      />

DropDownSelect 有如下接口：

interface IDropDownSelect {
  options: string[];
  selectedOption: string | number;
  hideAll?: boolean;
  allPosition?: "top" | "bottom";
  updateFunc: (value: string | number) => void;
}

我有以下上下文：

export interface IBlogListContextData {
  blogList: IBlogListData[];
  blogListPage: number;
  setBlogListPage: (page: number) => void;
  updateBlogListPage: (page: number) => void;
  isLoading: boolean;
  fetchBlogList: (page?: number) => void;
  blogTags: string[];
  selectedBlogTag: string;
  selectedArticleCount: number;
  updateArticleCount: (value: number) => void;
  updateSelectedBlogTag: (value: string) => void;
}

export const blogListContextDefaultValue: IBlogListContextData = {
  blogList: [blogListDefault],
  blogListPage: 1,
  setBlogListPage: () => null,
  updateBlogListPage: (page: number) => null,
  isLoading: false,
  fetchBlogList: () => null,
  blogTags: [],
  selectedBlogTag: "all",
  selectedArticleCount: 5,
  updateArticleCount: (value: number) => null,
  updateSelectedBlogTag: (value: string) => null,
};

有沒有辦法可以將updateFunc傳遞給帶有字符串或數字類型的 updateFunc？ 我試圖避免使用any

Answer 1

也許您可以重用 updateFunc 類型。

updateSelectedBlogTag: IDropDownSelect['updateFunc']