React条件RenderProp的TypeScript类型定义适配问题

原类型定义的核心问题在于泛型T没有清晰区分默认渲染属性和自定义渲染属性，且renderProps的条件逻辑混淆了两类属性的必填/可选规则，导致无法正确限制renderProps只能包含useRenderPropNames中明确指定的属性。

我们可以通过拆分useRenderPropNames的成员类型，精准控制renderProps的校验规则。以下是修正后的完整类型定义：

首先补全缺失的RenderPropFunction类型：

type RenderPropFunction = () => React.ReactNode;
type RenderPropNames = "renderPropName1" | "renderPropName2" | "renderPropName3";

重新定义组件属性接口和组件：

interface ComponentProps<U extends string = RenderPropNames> {
  useRenderPropNames?: U[];
  // 拆分U为默认属性子集和自定义属性
  renderProps: 
    // 自定义属性必须实现
    Required<Record<Exclude<U, RenderPropNames>, RenderPropFunction>> &
    // 默认属性可选实现
    Partial<Record<Extract<U, RenderPropNames>, RenderPropFunction>> &
    // 禁止出现useRenderPropNames之外的任何属性
    Record<Exclude<string, U>, never>;
}

export const Component = <U extends string = RenderPropNames>(props: ComponentProps<U>) => {
  // 组件实现逻辑
  return null;
};

以下是符合需求的测试场景：

场景1：未指定useRenderPropNames（默认启用全部默认属性） #

允许在renderProps中任意覆盖默认属性，且非必填：

// 合法：只覆盖部分默认属性
<Component
  renderProps={{
    renderPropName1: () => <div>first</div>
  }}
/>

// 合法：不覆盖任何默认属性
<Component renderProps={{}} />

场景2：混合默认与自定义属性 #

必须实现自定义属性，可选实现指定的默认属性，禁止使用未在useRenderPropNames中指定的默认属性：

// 合法：实现自定义属性，可选覆盖指定的默认属性
<Component
  useRenderPropNames={["renderPropName1", "renderPropName2", "customPropName"]}
  renderProps={{
    customPropName: () => <div>custom</div>,
    renderPropName1: () => <div>first</div>
  }}
/>

// 错误：未实现自定义属性customPropName
<Component
  useRenderPropNames={["renderPropName1", "customPropName"]}
  renderProps={{
    renderPropName1: () => <div>first</div>
  }}
/>

// 错误：使用了未在useRenderPropNames中指定的renderPropName3
<Component
  useRenderPropNames={["renderPropName1", "customPropName"]}
  renderProps={{
    customPropName: () => <div>custom</div>,
    renderPropName3: () => <div>invalid</div>
  }}
/>

场景3：仅使用自定义属性 #

必须实现所有自定义属性：

// 合法：实现自定义属性
<Component
  useRenderPropNames={["customProp1", "customProp2"]}
  renderProps={{
    customProp1: () => <div>1</div>,
    customProp2: () => <div>2</div>
  }}
/>

// 错误：缺少customProp2的实现
<Component
  useRenderPropNames={["customProp1", "customProp2"]}
  renderProps={{
    customProp1: () => <div>1</div>
  }}
/>

• Extract<U, RenderPropNames>：从useRenderPropNames的联合类型中筛选出属于默认RenderPropNames的成员
• Exclude<U, RenderPropNames>：从useRenderPropNames的联合类型中筛选出不属于默认的自定义成员
• Required<Record<...>>：强制自定义属性必须提供实现
• Partial<Record<...>>：允许默认属性可选覆盖
• Record<Exclude<string, U>, never>：通过将所有未在U中的属性映射为never，禁止renderProps出现任何未授权的属性

内容的提问来源于stack exchange，提问作者michal skula