如何解决IMask与MUI TextField结合时的TypeScript类型警告？

作为TypeScript新手，用IMask和MUI的TextField实现手机号掩码输入时，遇到了placeholder属性的类型警告。尝试将props定义为TextFieldProps与IMaskInputProps的联合类型但无效，目前只能用@ts-ignore临时忽略，希望找到正确的类型定义方式消除警告。

原代码 #

import { IMaskMixin } from 'react-imask';
import { TextField, TextFieldProps } from '@mui/material';
import { IMaskInputProps } from 'react-imask/esm/mixin';

interface MaskedStyledInputProps {
  inputRef: (ref: HTMLInputElement) => void;
  props: TextFieldProps & IMaskInputProps;
}

export const MaskedStyledInput = IMaskMixin(({ inputRef, ...props }: MaskedStyledInputProps) => (
  <TextField
    {...props}
    inputRef={inputRef} />
));

export const PhoneNumberInput = ({ ...props }: TextFieldProps) => {    
  return (
    <MaskedStyledInput
      {...props}
      mask="(000)000-0000"
      overwrite={true}
      // @ts-ignore -- TODO placeholder is not a valid prop for MaskedStyledInput, but i'm not sure how to fix this
      placeholder="(___)___-____"
    />
  );
};

错误提示 #

属性“placeholder”在类型“IntrinsicAttributes & IMaskInputProps<AnyMaskedOptions, false, string, HTMLInputElement, MaskedStyledInputProps>”上不存在。

解决方案 #

问题根源 #

之前定义的MaskedStyledInputProps用了多余的props嵌套字段，导致IMaskMixin无法正确识别TextField的原生属性（比如placeholder），而且交叉类型的应用位置不对，没有让组件直接接收合并后的属性集合。

修正后的代码 #

import { IMaskMixin } from 'react-imask';
import { TextField, TextFieldProps } from '@mui/material';
import { IMaskInputProps } from 'react-imask/esm/mixin';

// 直接将组件props定义为TextFieldProps与IMaskInputProps的交叉类型
type MaskedStyledInputProps = TextFieldProps & IMaskInputProps;

export const MaskedStyledInput = IMaskMixin(({ inputRef, ...props }: MaskedStyledInputProps) => (
  <TextField
    {...props}
    inputRef={inputRef}
  />
));

export const PhoneNumberInput = ({ ...props }: TextFieldProps) => {    
  return (
    <MaskedStyledInput
      {...props}
      mask="(000)000-0000"
      overwrite={true}
      placeholder="(___)___-____" // 此处不再有类型警告
    />
  );
};

说明 #

IMaskMixin会自动处理inputRef的注入逻辑，我们只需要确保组件接收的props包含所有需要的属性：通过TextFieldProps & IMaskInputProps交叉类型，既包含MUI TextField的全部配置，也包含IMask的掩码配置，TypeScript就能正确识别placeholder这类原生输入框属性，自然消除警告。

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