如何让TypeScript忽略JS React组件的PropTypes检查？

针对你提出的三个方案，以下是具体可行性分析和实现方式：

方案1：配置tsc输出，使JS组件的PropTypes更宽松 #

可行，核心是通过JSDoc注释引导TypeScript生成包含children的宽松类型，无需修改组件逻辑：

1. 将组件标注为React.FC类型（React.FC默认自带children属性）：

/** @type {React.FC<{className?: string}>} */
export default function MyComponent(props) {
  // 组件原有逻辑
}

2. 或者显式声明props包含children：

/** 
 * @param {Object} props
 * @param {string} [props.className]
 * @param {React.ReactNode} [props.children]
 */
export default function MyComponent(props) {
  // 组件原有逻辑
}

调整后tsc生成的.d.ts会自动包含children类型，解决传递子元素时的类型错误。

方案2：配置tsc不生成JS组件的类型声明文件 #

可行，通过tsconfig.json排除JS文件的类型处理：

1. 修改配置文件，仅让tsc处理TS/TSX文件：

{
  "compilerOptions": {
    "declaration": true,
    // 其他编译选项
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["src/**/*.js", "src/**/*.jsx"]
}

2. 若部分JS文件需要被处理但不生成声明，可在文件顶部加注释：

// @ts-nocheck
// @noemit

此时消费项目导入JS组件时会默认视为any类型，不会触发类型报错。

方案3：配置消费应用的编译，忽略推断的PropTypes #

可行，通过消费项目的TypeScript配置或自定义类型声明覆盖组件库类型：

1. 自定义类型声明（推荐）：在消费项目src目录下创建types/your-component-library.d.ts：

declare module 'your-component-library' {
  import React from 'react';
  export const MyComponent: React.FC<{className?: string} & React.PropsWithChildren<{}>>;
  // 其他组件类型声明（按需添加）
}

2. 全局宽松配置（临时方案）：在消费项目tsconfig.json中设置：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

该选项会跳过所有第三方库的类型检查，但会降低项目类型安全性，仅适合临时应急。

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