Неожиданно при передаче обратного вызова в стороннюю библиотеку

Question

У меня есть некоторый код React + TypeScript, который использует компонент из сторонней библиотеки.

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

eslint-typcript идентифицирует это как проблему:

Неожиданно.Укажите другой тип.eslint (@ typescript-eslint / no-явный-любой)

Определение типа обработчика выбора использует any:

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

Как правильно избегатьэта проблема без отключения правила eslint?

---

Изменение типа на string приводит к другой ошибке:

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

Type '(значение: строка, e: SyntheticEvent <{}, Event>) => void 'нельзя назначить типу «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 являются интерфейсами типа функции .Когда один интерфейс функции расширяет другой, для каждого параметра функции формируется объединение типов (потому что типы функций контравариантны в своих параметрах).Взгляните на эту игровую площадку для простого примера этого объединения.

Итак, давайте возьмем ваш пример еще раз:

// 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 toрешить вашу ошибку eslint.