React组件集成aptos-bridge-widget遇TS2339错误的技术问询

这个错误是因为TypeScript默认不识别自定义Web Component的类型，需要手动扩展JSX类型声明，以下是具体解决步骤：

• 步骤1：添加自定义元素类型声明
  在项目中创建一个类型声明文件（比如src/types/custom-elements.d.ts），或者直接在使用<aptos-bridge>的组件文件顶部添加以下代码：

  declare namespace JSX {
    interface IntrinsicElements {
      'aptos-bridge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
  

  这段代码告诉TypeScript，<aptos-bridge>是一个合法的JSX元素，继承了普通HTML元素的所有属性。

• 步骤2：确保TypeScript加载类型声明
  检查项目根目录的tsconfig.json，确认include字段包含了你的类型声明文件路径，比如：

  {
    "include": ["src/**/*"]
  }
  

  这样TypeScript会自动加载src目录下所有的.d.ts类型文件。

• 步骤3：（可选）补充自定义属性类型
  如果<aptos-bridge>组件有专属的自定义属性（比如network、theme等），可以在类型声明中补充这些属性：

  declare namespace JSX {
    interface IntrinsicElements {
      'aptos-bridge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
        network?: string;
        theme?: 'light' | 'dark';
        // 其他自定义属性
      };
    }
  }
  

• 临时解决方案（不推荐）
  如果只是想快速跳过类型检查，可以在组件标签前添加@ts-ignore注释，但这会失去TypeScript的类型校验能力：

  // @ts-ignore
  <aptos-bridge />
  

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