0

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

类型 '(value: string, e: SyntheticEvent<{}, Event>) => void' 不可分配给类型 'ThirdPartySelectCallback'

4

1 回答 1

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函数 类型接口。当一个函数接口扩展另一个函数接口时，会为每个函数参数形成类型的联合（因为函数类型的参数是逆变的）。看看这个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

, wherev可以是任何类型的，比如string解决你的 eslint 错误。

于 2019-09-20T17:42:30.317 回答