如何为React SplitButton的options添加data-test-id属性并解决TS报错

报错原因 #

这个错误是因为 SplitButton 组件的 options 入参的 TS 类型定义只允许传入 label 和 value 两个属性，你额外传入的自定义属性不存在于预定义的类型中，触发了TS的对象字面量额外属性检查。

方案1：你自主维护SplitButton组件的情况 #

• 第一步：扩展 Options 类型定义
  找到组件内部定义Options类型的位置，要么显式声明允许的自定义属性，要么添加索引签名支持任意自定义属性：

  // 方式1：显式添加需要的自定义属性，类型更安全
  interface SplitButtonOption {
    label: React.ReactNode;
    value: string;
    'data-test-id'?: string; // 建议遵循HTML data-* 规范命名属性
  }
  
  // 方式2：加索引签名，支持传入任意自定义属性
  interface SplitButtonOption {
    label: React.ReactNode;
    value: string;
    [key: string]: any;
  }
  

• 第二步：组件内部透传自定义属性
  渲染选项DOM的时候，把自定义属性透传到对应的节点上，比如：

  // 渲染选项时取出需要的属性，剩余属性透传给DOM
  {options.map(({label, value, ...restProps}) => (
    <li key={value} {...restProps}>{label}</li>
  ))}
  

方案2：使用第三方组件库的SplitButton的情况 #

• 方式1：模块扩充扩展第三方类型
  全局声明文件（比如global.d.ts）中扩充第三方库的Options类型，以antd为例：

  declare module 'antd/es/split-button' {
    interface SplitButtonOption {
      'data-test-id'?: string;
    }
  }
  

• 方式2：临时类型断言（不推荐，仅临时调试用）
  给options数组加类型断言跳过检查：

  const options = [{
    label: '按钮1',
    value: 'btn1',
    'data-test-id': 'split-btn-1'
  }] as any
  

  也可以在报错行上方加// @ts-ignore单行跳过类型检查。

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