React+MUI+TSX中Box组件datacy属性类型报错解决方案咨询

问题背景 #

在React+Material UI+TSX技术栈下，给<Box/>组件加datacy属性用于测试用例时，TSX抛出**"No overload matches this call"**类型错误，代码示例：

<Box datacy="jobListing" padding={2} display="flex" alignItems="center">

问题根源是datacy不在Material UI组件的类型定义里，需要全局方案避免重复代码，彻底消除这个错误。

完整错误信息（中文翻译） #

找不到匹配的重载。
  重载 1/2，'(props: { component: ElementType<any>; } & SystemProps<Theme> & { align?: "right" | "left" | "center" | "inherit" | "justify"; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...>; } & CommonProps & Omit<...>): Element'，给出以下错误：
    类型 '{ children: string; datacy: string; variant: "h6"; fontWeight: number; }' 中缺少属性 'component'，但类型 '{ component: ElementType<any>; }' 中需要该属性。
  重载 2/2，'(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element'，给出以下错误：
    类型 '{ children: string; datacy: string; variant: "h6"; fontWeight: number; }' 不能赋值给类型 'IntrinsicAttributes & SystemProps<Theme> & { align?: "right" | "left" | "center" | "inherit" | "justify"; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...>; } & CommonProps & Omit<...>'。
      属性 'datacy' 不存在于类型 'IntrinsicAttributes & SystemProps<Theme> & { align?: "right" | "left" | "center" | "inherit" | "justify"; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...>; } & CommonProps & Omit<...>' 上。ts(2769)
OverridableComponent.d.ts(21, 7): 'component' 在此处声明。

全局解决方案 #

1. 创建类型扩展文件 #

在项目src目录下新建types/material-ui.d.ts（或自定义路径的类型文件），用来扩展Material UI的全局类型：

import '@mui/material/styles';
import '@mui/material/Box';

// 给所有Material UI组件添加全局支持的datacy属性
declare module '@mui/material/styles' {
  interface CommonProps {
    datacy?: string;
  }
}

// 兜底：如果CommonProps不生效，单独扩展Box组件的属性
declare module '@mui/material/Box' {
  interface BoxProps {
    datacy?: string;
  }
}

2. 配置TypeScript识别自定义类型 #

修改tsconfig.json的include字段，确保包含你的类型文件目录：

{
  "include": [
    "src/**/*",
    "src/types/**/*" // 替换成你的类型文件所在路径
  ]
}

3. 验证效果 #

现在可以直接在任意Material UI组件上使用datacy属性，TS不会再报错：

<Box datacy="jobListing" padding={2} display="flex" alignItems="center">
  {/* 组件内容 */}
</Box>
<Typography datacy="jobTitle" variant="h6" fontWeight={600}>
  前端开发工程师
</Typography>

原理说明 #

通过扩展Material UI的CommonProps接口，所有继承该接口的Material UI组件都会自动支持datacy属性，不用逐个组件包装。如果个别组件没继承CommonProps，单独扩展对应组件的Props接口即可。

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