Question

我有一些React + TypeScript代码，它们使用了第三方库中的组件。

<ThirdPartyComponent onSelect={(value: any) => {...}} />

eslint-typescript正在将其识别为问题：

任何意外。指定其他类型。 eslint（@ typescript-eslint / no-explicit-any）

选择处理程序的类型定义使用any：

export interface ThirdPartySelectCallback extends React.EventHandler<any> {
  (value: any, e: React.SyntheticEvent<{}>): void;
}

在不禁用eslint规则的情况下避免此问题的正确方法是什么？

将类型更改为string会产生不同的错误：

<ThirdPartyComponent onSelect={(value: string, e: React.SyntheticEvent<{}>) => {...}} />

类型'（（值：字符串，e：SyntheticEvent <{}，事件>）=>无效'不能分配给类型'ThirdPartySelectCallback'

Answer 1

您可以像这样使用ThirdPartyComponent：

// add the 2nd parameter e?: React.SyntheticEvent<{}>
const App = () => (
  <ThirdPartyComponent
    onSelect={(v: string, e?: React.SyntheticEvent<{}>) => {}}
  />
)

const ThirdPartyComponent = (props: { onSelect: ThirdPartySelectCallback }) => (
  <div>Hello package</div>
)

一些解释

React.EventHandler<any>和ThirdPartySelectCallback均为function type interfaces。当一个功能接口扩展到另一个时，对于每个功能参数，将形成类型的并集（因为功能类型在其参数中为contravariant）。看看这个Playground，作为这种合并的简单示例。

所以让我们再举一个例子：

// React.EventHandler - eased up a bit here
type EventHandler<E extends SyntheticEvent<any>> = (event: E): void 

interface ThirdPartySelectCallback extends React.EventHandler<any> {
  (value: any, e: React.SyntheticEvent<{}>): void;
}

第一个参数是E和any。 E | any成为有效的any。
第二个参数是undefined（第一个函数没有第二个参数）和React.SyntheticEvent<{}>，因此将其合并到React.SyntheticEvent<{}> | undefined。

最后，您可以为ThirdPartySelectCallback指定以下功能：

(v: any, e?: React.SyntheticEvent<{}>) => void

，其中v可以是string之类的任何类型，以解决您的拖欠错误。

将回调传递给第三方库时发生意外

1 个答案:

一些解释