VS Code创建React应用遇TSX报错：Property 'button' does not exist on type 'JSX.IntrinsicElements'

以下是几个常见的排查和解决步骤：

• 安装必要的类型依赖
  React + TypeScript项目必须依赖@types/react和@types/react-dom来提供JSX元素的类型定义，执行对应包管理器的安装命令：

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

• 修正tsconfig.json配置
  打开项目根目录的tsconfig.json，确认以下配置：

  • jsx字段：React 17+推荐设为"jsx": "react-jsx"（支持自动引入React，无需手动import）；旧版本设为"jsx": "react"，但需在每个TSX文件顶部手动导入React。
  • include字段：确保包含你的TSX文件目录，比如"include": ["src/**/*"]，让TypeScript能识别到项目中的TSX文件。

• 检查文件导入（针对React 17之前版本）
  React 17之前的版本要求每个TSX文件顶部必须导入React：

  import React from 'react';
  

  即使是17+版本，如果配置jsx: react-jsx后仍报错，可尝试手动导入，或重启TS服务。

• 重启VS Code的TypeScript服务
  按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server并执行，清除TS服务的缓存，重新加载类型定义。

• 排查自定义JSX类型覆盖问题
  检查项目中的.d.ts类型定义文件，是否有代码错误覆盖了JSX.IntrinsicElements的默认定义。比如以下错误写法会覆盖默认HTML元素类型：

  declare namespace JSX {
    interface IntrinsicElements {
      // 错误：这里的定义会覆盖默认的HTML元素类型
    }
  }
  

  若有此类代码，要么删除错误定义，要么通过类型合并扩展（而非覆盖）默认类型。

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