React-Input-Mask与TypeScript兼容问题：类型不匹配报错咨询

问题详情 #

报错信息 #

没有匹配的重载调用。重载1（共2个）'(props: Props): ReactInputMask' 抛出如下错误：
类型 '(inputProps: Props) => JSX.Element' 不能赋值给类型 'ReactI18NextChildren | Iterable'。

重载2（共2个）'(props: Props, context: any): ReactInputMask' 抛出如下错误：
类型 '(inputProps: Props) => JSX.Element' 不能赋值给类型 'ReactI18NextChildren | Iterable'。ts(2769)

额外问题与依赖版本 #

项目未引入i18相关库，但报错中出现未导出的ReactI18NextChildren类型，当前依赖版本：

"react-input-mask": "2.0.4",
"@types/react-input-mask": "2.0.4",

代码示例 #

<Controller
  name="cardNumber"
  control={control}
  render={({ field }) => (
    <InputMask mask="9999 9999 9999 9999" {...field}>
      {(inputProps: Props) => <TextField {...inputProps} variant="standard" fullWidth />}
    </InputMask>
  )}
/>

解决方法 #

1. 优先升级依赖版本 #

你使用的依赖版本过于老旧，类型定义存在bug（错误引入了无关的i18类型）。直接升级到最新兼容版本即可解决问题：

npm install react-input-mask@latest @types/react-input-mask@latest
# 或使用yarn
yarn add react-input-mask@latest @types/react-input-mask@latest

新版本修复了类型定义问题，不再依赖i18相关类型，同时原生支持函数作为children的写法。

2. 临时类型声明（不升级时） #

如果暂时无法升级依赖，可在项目的global.d.ts（或自定义类型声明文件）中添加如下代码，手动补全缺失的类型：

declare type ReactI18NextChildren = React.ReactNode | ((props: any) => React.ReactNode);

此方法仅为临时绕过报错，不推荐长期使用。

3. 调整组件写法适配旧版本 #

旧版本react-input-mask对函数children的支持不完善，可改用inputComponent属性传入组件：

<Controller
  name="cardNumber"
  control={control}
  render={({ field }) => (
    <InputMask 
      mask="9999 9999 9999 9999" 
      {...field}
      inputComponent={(props) => <TextField {...props} variant="standard" fullWidth />}
    />
  )}
/>

这种写法在旧版本中兼容性更好，可直接规避类型不匹配问题。

内容的提问来源于stack exchange，提问作者Ertuğrul Karababa