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

Question

我正在尝试构建一个接口，例如 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,

}: 道具）=> {

Answer 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;
};