寻求解决JSX元素隐式'any'类型（无JSX.IntrinsicElements接口）问题的方案

问题说明 #

编写代码时持续收到以下提示：

JSX 元素隐式具有 "any" 类型，因为不存在接口 "JSX.IntrinsicElements"。

解决方法 #

• 安装React类型定义（React项目适用）
  确保项目已安装@types/react和@types/react-dom，执行对应包管理器命令：

  # npm
  npm install @types/react @types/react-dom --save-dev
  
  # yarn
  yarn add @types/react @types/react-dom --dev
  

• 修正tsconfig.json配置
  在tsconfig.json中确认jsx选项设置正确，并包含源码目录：

  {
    "compilerOptions": {
      "jsx": "react-jsx", // React 17+ 推荐，旧版本用"react"
      "target": "ES6",
      "module": "ESNext"
    },
    "include": ["src/**/*"] // 确保包含你的源码文件路径
  }
  

• 检查文件扩展名
  包含JSX语法的文件必须使用.tsx扩展名，TypeScript不会处理.ts文件中的JSX代码。

• 自定义JSX接口（非React项目适用）
  若使用非React的JSX框架，手动声明JSX.IntrinsicElements接口来定义HTML标签类型：

  declare namespace JSX {
    interface IntrinsicElements {
      div: Record<string, any>;
      span: Record<string, any>;
      // 根据需求添加其他HTML标签类型定义
    }
  }
  

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