如何使用泛型类型接口在接口内使参数有条件

Posted 2023-03-13

【中文标题】如何使用泛型类型接口在接口内使参数有条件

【英文标题】：How to make parameter conditional inside interface with generic type interface

【发布时间】：2022-01-07 18:55:35

【问题描述】：

我正在尝试构建一个接口，例如 React 组件的 Dropdown props 接口，并且我正在尝试仅当 T generic 是字符串时才使参数可选。 我的研究发现我的问题的答案为零。

正如您在此处看到的，我试图仅在 T 扩展字符串类型时才使 getTemplate 成为可选，但如果是其他内容，我将不得不编写它。

不幸的是，它不起作用。未定义类型的参数不是可选参数，它是未定义的参数。

有什么建议吗？先谢谢了。

这是我尝试但不起作用的示例：

type Props<T extends string | Omit<any, 'string'>> = (T extends string
? 
: 
      getTemplate: (item: T) => ReactNode;
      getDisplayTemplate(item: T): ReactNode;
      getItemIdentifier(item: T): string | number;
  ) & 
items: Array<T>;
disabled?: boolean;
className?: string;
placeholder?: string;
selectedItems: Array<T>;
isMultiSelect?: boolean;
onChange(items: Array<T>): void;

;

export const Dropdown = <T,>(
disabled,
placeholder,
selectedItems = [],
items,
onChange,
getDisplayTemplate,
getItemIdentifier,
getTemplate,
isMultiSelect,
className,

: 道具）=>

【问题讨论】：

下次请粘贴您的原始代码，而不是使用图像。

注意了，谢谢下次再做。我现在会编辑帖子

【参考方案1】：

也许将条件部分提取到联合类型的成员中。仅当 T 是字符串时才将 getTemplate 等设为可选。

type ConditionalProps<T> = 
      getTemplate: (item: T) => ReactNode;
      getDisplayTemplate(item: T): ReactNode;
      getItemIdentifier(item: T): string | number;
;
type Props<T> =
(T extends string ? Partial<ConditionalProps<T>> : ConditionalProps<T>) & 
    items: Array<T>;
    disabled?: boolean;
    className?: string;
    placeholder?: string;
    selectedItems: Array<T>;
    isMultiSelect?: boolean;
    onChange(items: Array<T>): void;
;

【讨论】：

感谢您的评论，我试过了，但我认为它也不起作用。使用组件时无法提取函数

@EdenBinyamin 在没有看到代码和实际错误的情况下很难帮助您，但是如果您使用props: Props<MyClass> 之类的类型参数键入道具，您应该可以访问props.getTemplate。

写在帖子上，对不起