如何在泛型TypeScript接口中实现仅当T为string时参数可选

修正后的类型定义 #

核心通过条件类型区分泛型T是否为字符串类型，使用Partial将对应属性标记为可选（而非仅允许值为undefined），同时通过包裹元组避免联合类型的条件分发：

import type { ReactNode } from "react";

type DropdownProps<T> = {
  items: Array<T>;
  disabled?: boolean;
  className?: string;
  placeholder?: string;
  selectedItems: Array<T>;
  isMultiSelect?: boolean;
  onChange(items: Array<T>): void;
} & (
  // 仅当T为纯string类型时，三个渲染属性设为可选
  [T] extends [string]
    ? Partial<{
        getTemplate: (item: T) => ReactNode;
        getDisplayTemplate: (item: T) => ReactNode;
        getItemIdentifier: (item: T) => string | number;
      }>
    : {
        getTemplate: (item: T) => ReactNode;
        getDisplayTemplate: (item: T) => ReactNode;
        getItemIdentifier: (item: T) => string | number;
      }
);

组件定义修正 #

泛型需要明确传递给Props类型，同时为string场景下的渲染方法添加默认实现，避免内部使用时报类型错误：

export const Dropdown = <T,>({
  disabled,
  placeholder,
  selectedItems = [],
  items,
  onChange,
  // string类型场景默认实现
  getTemplate = (item) => item as unknown as ReactNode,
  getDisplayTemplate = (item) => item as unknown as ReactNode,
  getItemIdentifier = (item) => item as unknown as string,
  isMultiSelect,
  className,
}: DropdownProps<T>) => {
  // 组件业务逻辑
};

用法示例 #

// T为string类型，无需传入三个渲染方法，无类型报错
<Dropdown<string>
  items={["选项1", "选项2", "选项3"]}
  selectedItems={[]}
  onChange={(val) => console.log(val)}
/>

// T为自定义对象类型，必须传入三个渲染方法，缺省会触发类型错误
type UserItem = { id: number; username: string };
<Dropdown<UserItem>
  items={[{id: 1, username: "张三"}, {id: 2, username: "李四"}]}
  selectedItems={[]}
  onChange={(val) => console.log(val)}
  getTemplate={(user) => user.username}
  getDisplayTemplate={(user) => <span>{user.username}</span>}
  getItemIdentifier={(user) => user.id}
/>

原有代码问题说明 #

• 泛型约束T extends string | Omit<any, 'string'>无实际约束作用，Omit<any, 'string'>本质还是any类型
• 原有条件分支仅在非string类型下定义三个渲染属性，string类型下属性不存在，会导致组件解构时报错
• 没有将属性标记为可选（?:语法），仅允许值为undefined和属性可选是两种完全独立的类型规则

内容的提问来源于stack exchange，提问作者Eden Binyamin