React Semantic UI搭配Typescript使用时tsx组件报错如何解决？

• 优先校验依赖适配性
  首先确认是否已安装@types/semantic-ui-react类型包，且版本和项目中安装的semantic-ui-react版本完全匹配。类型包与主包版本不一致是TS迁移过程中最常见的组件报错诱因。如果已经安装可以先卸载两个包，再安装对应匹配的版本：

  npm uninstall semantic-ui-react @types/semantic-ui-react
  npm install semantic-ui-react @types/semantic-ui-react@xxx
  # 此处xxx替换为和semantic-ui-react相同的版本号
  

• 检查自定义属性的类型声明
  原有JSX中给Semantic UI组件传入的自定义属性，在TS环境下会触发类型校验不通过的报错。如果确实需要扩展组件属性，可以在项目类型声明文件中补充模块扩展：

  // 项目根目录新建typings/semantic-ui-react.d.ts
  import 'semantic-ui-react'
  
  declare module 'semantic-ui-react' {
    // 示例：给Button组件扩展customAttr属性
    interface ButtonProps {
      customAttr?: boolean
      // 其他自定义属性在此处补充类型
    }
  }
  

• 校验组件API写法合规性
  旧版本Semantic UI的部分废弃API在新版类型校验中会报错，比如as属性传入自定义组件时需要补充泛型声明，示例写法如下：

  import { Button } from 'semantic-ui-react'
  import MyCustomBtn from './MyCustomBtn'
  
  // 声明as属性传入的组件类型
  const AdaptedButton = Button<typeof MyCustomBtn>
  
  // 组件内使用
  <AdaptedButton as={MyCustomBtn} customProp="xxx" />
  

• 检查TS配置合理性
  打开项目tsconfig.json确认以下配置项正确：

  {
    "compilerOptions": {
      "jsx": "react-jsx", // React17及以上版本用这个值，17以下用"react"
      "moduleResolution": "node",
      "typeRoots": ["node_modules/@types", "src/typings"] // 确保自定义类型目录被识别
    }
  }
  

• 排查运行时报错的常见诱因
  如果是运行时异常而非IDE类型报错，先检查组件导入的大小写是否正确，Semantic UI组件均为大驼峰命名，大小写错误会导致组件识别异常。其次排查是否存在多版本依赖冲突，可以删除node_modules、package-lock.json/yarn.lock文件后重新执行安装命令。

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