React+TS项目集成bluesnap支付报bluesnap未定义错误如何解决？

问题根源 #

你遇到的报错来自两层校验规则：// @ts-ignore 仅能抑制TypeScript的类型检查报错，而提示的'bluesnap' is not defined no-undef是ESLint规则抛出的错误，所以单独加ts-ignore不会生效。

可行解决方法 #

方案1：规范全局声明（推荐） #

这种方式可以彻底解决校验报错，同时保留类型提示能力

1. 新增全局类型声明
   在项目src目录下新建global.d.ts文件（如果已有该文件直接追加内容即可）：

declare global {
  interface Window {
    bluesnap: {
      // 可根据官方文档补全所有用到的方法类型，未用到的可暂时忽略
      hostedPaymentFieldsSubmitData: (callback: (data: any) => void) => void;
    };
  }
}
export {};

2. 调用时明确从window取属性
   后续调用bluesnap相关方法时，统一写为window.bluesnap.xxx的形式，ESLint默认允许window挂载属性的调用，不会再触发no-undef报错，同时TypeScript也能识别到对应的类型，不需要再加@ts-ignore：

window.bluesnap.hostedPaymentFieldsSubmitData((callback) => {
  // 你的业务逻辑
});

如果不想每次都写window.，也可以在项目的.eslintrc配置文件中将bluesnap加入全局白名单：

{
  "globals": {
    "bluesnap": "readonly"
  }
}

方案2：临时跳过双校验（仅快速测试用，不推荐长期使用） #

如果只需要临时跑通逻辑，可以同时加两行注释跳过ESLint和TS的校验：

// eslint-disable-next-line no-undef
// @ts-ignore
bluesnap.hostedPaymentFieldsSubmitData((callback: any) => {
  // 你的业务逻辑
});

额外注意事项 #

• 调用bluesnap方法前要确保官方脚本已加载完成，避免运行时报错，可以给script标签加defer属性，或者在组件挂载时判断window.bluesnap是否存在再执行后续逻辑
• 如果运行时控制台还是提示bluesnap未定义，先检查CDN地址是否可访问、是否被项目的内容安全策略(CSP)拦截

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