React+TypeScript项目给li加index属性报TS2322错误如何解决？

报错原因 #

原生 <li> 标签的标准HTML属性中不存在index字段，React的TS类型定义内置的LiHTMLAttributes没有包含该属性的声明，因此直接绑定会触发类型不匹配报错。

推荐解决方案 #

• 方案1：使用标准自定义属性data-*（最推荐）
  HTML规范中要求自定义 DOM 属性统一使用data-前缀，TS对这类属性默认支持，无需额外类型声明。
  修改代码如下：

interface  PropsSortableElement {
  children: React.ReactNode; // 替换any为更安全的React节点类型
  index: number; // 替换any为实际的数字类型
  zIndex?: number;
}

export const SortableItem = SortableElement(({ children, index, zIndex }: PropsSortableElement) => {
  const classes = useStyles();

  return (
    <li className={classes.sortableItem} data-index={index} style={{ zIndex: zIndex || 1 }}>
      {children}
    </li>
  );
});

后续需要从DOM上取index值时，直接通过element.dataset.index获取即可。

• 方案2：扩展全局li属性类型
  如果必须使用index作为属性名，可以扩展React的li属性类型声明，在项目的全局类型声明文件（比如global.d.ts）中添加如下代码：

import 'react';

declare module 'react' {
  interface LiHTMLAttributes<T> {
    // 扩展li属性，新增index字段，类型和你业务需要保持一致即可
    index?: number;
  }
}

添加后即可直接在li上绑定index属性不会触发类型报错。

• 方案3：临时绕过类型校验（不推荐）
  如果只是临时调试不想修改类型，可以用类型断言跳过校验：

<li 
  className={classes.sortableItem} 
  // 用as any跳过当前属性的类型校验
  {...{ index } as any} 
  style={{ zIndex: zIndex || 1 }}
>
  {children}
</li>

补充建议 #

如果index仅在组件内部逻辑中使用，不需要透出到DOM节点上的话，完全不需要给li绑定该属性，直接在组件逻辑里使用参数index即可，也能避免这个报错。

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris