React项目迁TypeScript时，JS组件经Typed HOC包装后类型检查报错问题

我之前在迁移React项目到TypeScript的时候也碰到过类似的问题，给你拆解下原因和解决办法：

为什么TypeScript会检查你的JS模块？ #

• 当你开启了tsconfig.json里的allowJs配置（这是React项目迁移TS的常规操作，允许TS编译JS文件），TypeScript会默认对项目中的JS文件进行类型推断和基础检查。如果同时开启了checkJs，检查会更严格，几乎和TS文件一样。
• 因为recompose有官方维护的@types/recompose类型定义，TS会自动把这些类型和你的JS组件结合起来做校验——哪怕你的组件是JS写的，TS也会尝试推断它的Props类型，再和HOC的类型约束做匹配。

报错的核心原因 #

你的MyComponent是JS组件，TS只能通过代码逻辑推断它的Props类型，而someHoc的类型定义有明确的泛型约束。当TS处理someHoc(options)(MyComponent)这行代码时，会把推断出的组件Props代入HOC的类型参数，如果两者不匹配（比如HOC要求某个必填Props，但你的组件没显式声明），就会抛出类型错误。另外，如果你的tsconfig开了strict: true这类严格模式，检查会更“苛刻”，这类不匹配的问题很容易被揪出来。

解决办法 #

1. 给JS组件补JSDoc类型注释（推荐临时方案） #

给你的JS组件添加明确的JSDoc类型，让TS不用靠模糊推断，直接明确组件的Props类型，就能和HOC的类型完美匹配：

// MyComponent.js
import { someHoc } from 'recompose'
import React from 'react'

/**
 * @typedef {Object} MyComponentProps
 * @property {string} username 用户名
 * @property {boolean} isActive 是否激活
 */

/** @type {React.ComponentType<MyComponentProps>} */
class MyComponent extends React.Component {
  // 组件逻辑...
}

const component = someHoc(options)(MyComponent)
export default component

2. 跳过单个文件的类型检查（应急方案） #

如果只是临时想绕过这个错误，可以在JS文件顶部添加// @ts-nocheck注释，让TS跳过对该文件的所有类型检查：

// @ts-nocheck
import { someHoc } from 'recompose'
class MyComponent extends React.Component { ... }
const component = someHoc(options)(MyComponent)
export default component

不过这只是权宜之计，长期来看还是补类型更利于迁移。

3. 直接转成TSX文件（最终解决方案） #

既然是在做TS迁移，直接把这个JS组件改成TSX文件，明确定义Props接口，从根源解决类型问题：

// MyComponent.tsx
import { someHoc } from 'recompose'
import React from 'react'

interface MyComponentProps {
  username: string
  isActive: boolean
}

class MyComponent extends React.Component<MyComponentProps> {
  // 组件逻辑...
}

const component = someHoc(options)(MyComponent)
export default component

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