如何在不编写类型定义的情况下导入无类型ES6 React组件到TypeScript组件

嗨，我来帮你搞定这个问题！你遇到的IntrinsicAttributes相关报错，本质是TypeScript无法推断无类型ES6组件的props结构，所以对传入的someProp合法性存疑。下面是几种不用编写完整类型定义就能快速解决的方案：

方案1：用React.ComponentType<any>声明组件类型 #

这是最简便的方式，直接告诉TypeScript这个组件接受任意props，不用做类型检查：

// 导入ES6组件
import OldThingContainer from './path/to/OldThingContainer';

// 声明组件的类型
declare const OldThingContainer: React.ComponentType<any>;

// 在TS组件里正常使用
class NewThing extends React.Component<Props, State> {
  render() {
    return <OldThingContainer someProp={someValue} />;
  }
}

这种方式完全跳过props类型校验，适合快速兼容旧组件，不用花时间写类型定义。

方案2：用宽松的props类型（比any稍微严谨一点） #

如果你不想完全放弃类型检查，又不想写完整的props定义，可以用Record<string, unknown>来表示组件接受任意键值对的props：

import OldThingContainer from './path/to/OldThingContainer';
import type { ComponentType } from 'react';

type LooseComponentProps = Record<string, unknown>;
declare const OldThingContainer: ComponentType<LooseComponentProps>;

class NewThing extends React.Component<Props, State> {
  render() {
    return <OldThingContainer someProp={someValue} />;
  }
}

这个方案比any更安全一点，至少TS会确保你传入的是合法的JS值，而不是完全无限制。

方案3：临时用// @ts-ignore忽略报错 #

如果只是临时解决某个地方的报错，不想改动全局类型声明，可以在使用组件的地方加注释忽略类型检查：

class NewThing extends React.Component<Props, State> {
  render() {
    // @ts-ignore 忽略无类型组件的props校验
    return <OldThingContainer someProp={someValue} />;
  }
}

⚠️ 注意：这个方法是下策，因为会忽略该组件所有的类型问题，建议只在临时调试或者确定props完全正确的情况下使用。

为什么会出现这个报错？ #

TypeScript对React组件的props有严格的类型校验逻辑，当你导入没有类型定义的ES6组件时，TS无法知道这个组件接受哪些props，所以会把IntrinsicAttributes（React内置的基础属性）作为唯一合法的props，你传入的someProp不在这个范围内，就会触发报错。

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