React Typescript - 类型与第三方库不兼容

Question

我有一个第三方库可以像这样导出 React 组件：

// Code I can not change
export default class MyIcon extends React.Component {
...
};

MyIcon.propTypes = {
  color?: PropTypes.String
}

我正在使用 Typescript，所以我为这个模块做了定义：

// Code I can change
declare module '@thirdparty/MyIcon' {
import React from 'react';

interface Props {
color?: string
}

const Icon: React.FC<Props>;
export default Icon;

现在，有一个 typescript 组件具有这种结构：

// Code I can not change
interface IButton {
icon?: React.Component,
text: string
}

export default const Button: FC<IButton> = ({ icon, text }) => {...}

在我想使用 MyIcon 组件并将其传递给 Button 组件之前，一切正常。我得到的错误是Type React.FC<Props> is incompatible with Component<{}, {}, {}>

我最终这样做了：

<Button icon={myIcon as unknown as Component} />

但让我感到沮丧的是不知道为什么会失败。

回答

在与第三方库的创建者交谈后，我发现他们将类型设置为组件，因为他们需要在内部进行更改。但是这样做，他们迫使我的另一个第三方库表现得像一个类而不是一个 ReactNode。所以基本上输入图标将适用于第三方库之一，但它不允许我在我的项目中使用另一个第三方库，请参见下面的代码：

// Ok Code
<Button icon={MyIcon}>Works</Button>

// Wrong Code
<div><MyIcon /> Error on Typescript</div> 

显然问题不在于类型，而在于第三方库之一要求图标是组件而不是 ReactNode 的方式。就我而言，这对我来说是一个完整的问题。希望这对某人有所帮助。

Answer 1

好吧，您使用React.FC 表示Icon，但Icon 是类组件而不是功能组件

试试

const Icon: React.Component<Props>

Answer 2

不需要基于类的组件，您只需键入 icon 即可允许任何节点：

interface IButton {
  icon?: React.Node,
  text: string
}

Answer 3

这里你说Icon 的类型是React.FC<Props>

const Icon: React.FC<Props>;

但是您在这里说过您希望icon 是undefined 或React.Component。

icon?: React.Component,

React.FC != React.Component.

将您的代码更改为：

icon?: React.FC<Props>

您可能需要导出该界面：

// icon.tsx

export interface IconProps {
  // types here
}

这样你就可以在外部模块中使用它了。

Answer 4

我不确定这个示例是否可行，但您可以尝试像这样更改 typescript 中的类型。

interface X {
    icon: boolean;
}

interface Y extends Omit<X,"icon">{
    icon: string; 
}