TypeScript向react-toast-notifications传自定义title参数报类型不兼容错误

这个是TypeScript类型校验不匹配导致的：react-toast-notifications 内置的ToastProps、ToastOptions类型默认没有定义title自定义字段，直接给自定义Toast组件新增title入参、调用addToast时传title配置，TS会判定自定义组件不符合要求的组件类型，不仅IDE飘红，生产构建也会直接失败。

• 首先扩展库的内置类型，新增title字段定义。在项目的全局类型声明文件（通常是src/react-app-env.d.ts，也可以新建src/types/toast.d.ts）写入以下代码：

import 'react-toast-notifications';

declare module 'react-toast-notifications' {
  // 扩展Toast组件接收的属性类型
  interface ToastProps {
    title?: string;
  }
  // 扩展addToast方法支持的配置项类型
  interface ToastOptions {
    title?: string;
  }
}

• 调整自定义Toast组件的类型定义，不要手写props类型，直接使用库导出的扩展后ToastProps类型，修改CustomToast.tsx代码如下：

import { ToastProps } from 'react-toast-notifications';

const MyCustomToast = ({children, appearance, onDismiss, title}: ToastProps) => { 
  return(
    <div className={toastAppearance(appearance)}>      
      <div className="toast">
        <div className="row">
          <div>
            <p style={{fontSize: "16px", fontWeight: 600}}>{toastTitle(appearance, title)}</p>
            {children}
          </div>
          <div onClick={onDismiss} style={{cursor: 'pointer'}}>
            <svg className="svg-icon" viewBox="0 0 20 20">
              <path fill="none" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  )
}

export default MyCustomToast

• 原有index.tsx里的ToastProvider配置、addToast传title参数的业务代码不需要改动。如果修改后IDE还有缓存报错，重启TS服务即可（VSCode下按快捷键Ctrl+Shift+P，选择TypeScript: Restart TS Server），此时校验会通过，npm run build可以正常执行。

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