如何忽略React传参时TypeScript抛出的“no overload matches this call”校验错误

方案1：扩展第三方组件的类型定义（最推荐，永久解决问题） #

你可以在项目的全局类型声明文件（通常是src/types.d.ts或者react-app-env.d.ts）中扩展react-joyride的Props类型，补上缺失的scrollDuration属性：

declare module 'react-joyride' {
  interface Props {
    // 补充缺失的属性定义，类型根据实际使用场景填写即可
    scrollDuration?: number;
  }
}

添加后TS会自动合并类型定义，后续使用这个属性就不会再触发类型报错，也不需要加任何忽略注释。

方案2：使用@ts-expect-error替代@ts-ignore #

@ts-expect-error是TS3.9之后推出的特性，专门用于预期会出现类型错误的场景，比无差别忽略所有错误的@ts-ignore更安全，你还可以在后面跟上错误码TS2769指定仅忽略本次类型错误：

{/* @ts-expect-error TS2769 react-joyride类型声明缺失scrollDuration属性，运行时实际支持 */}
<ReactJoyride
  ... // other props 
  scrollDuration={scrollDurationState}
/>

你之前找不到2769对应的错误标识，是因为你查看的是TS v1.6.2的诊断文件，版本过老，这个错误码是后续TS版本新增的。

如果你的eslint规则仍对@ts-expect-error报错，可以在该注释上方再加一行临时禁用对应eslint规则的注释：

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
{/* @ts-expect-error TS2769 react-joyride类型声明缺失scrollDuration属性，运行时实际支持 */}

方案3：使用类型断言跳过校验 #

你可以在传入属性时用as any做单次类型断言，不会触发eslint和TS的报错：

<ReactJoyride
  ... // other props 
  {...{ scrollDuration: scrollDurationState } as any}
/>

也可以直接对整个组件做类型断言：

<(ReactJoyride as any)
  ... // other props 
  scrollDuration={scrollDurationState}
/>

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