将回调传递给第三方库时出现意外答案

【问题标题】：Unexpected any when passing callback to third-party library将回调传递给第三方库时出现意外
【发布时间】：2020-01-21 14:03:34
【问题描述】：

我有一些使用来自第三方库的组件的 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<{}>) => {...}} />

Type '(value: string, e: SyntheticEvent) => void' 不可分配给 type 'ThirdPartySelectCallback'

【问题讨论】：

你不能假设你期望的类型吗？还是物品类型是随机的？
onSelect={(value: string) 怎么样？或者只是添加// eslint:disable-line，因为您无法控制第三方组件
假设较窄的类型会产生不同的错误。我用详细信息更新了问题。

标签： reactjs typescript eslint typescript-eslint

【解决方案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，以解决您的 eslint 错误。

【讨论】：