Определение отправки React-Redux как свойства универсальной функции вызывает ошибку с машинописью 3.1.3.

Question

Я пытаюсь обновить свою машинописную зависимость (2.5.x> 3.1.3) в моем проекте React-Redux.К сожалению, не без проблем: P

У меня есть базовый компонент selectpicker React, который ожидает свойство функции с параметром типа IdNameObject:

onToggleItem: (item: IdNameObject) => void;

Фактическая функция, которая вставляется в функцию prop, - это функция отправки Redux с параметром интерфейса, который расширяет IdNameObject:

updateSelectedLocation: (location: Location) => void;
interface Location extends IdNameObject {...}

Typescript теперь выдает ошибку, говорящую, что тип Location не равен типу IdNameObject, очевидно.

Я попытался преобразовать свойство функции, чтобы сделать его универсальным:

onToggleItem: <T extends IdNameObject>(item: T) => void

Это, однако, все еще выдает ошибку машинописного текста:

type '(location: Location) => void' is not assignable to type '<T extends IdNameObject>(item: T) => void'

Есть идеи, что я должен делать в этом случае?

---

Полный пример кейса

Я исключил весь дополнительный код, который на самом деле не нужен для этого случая.

С одной стороны у меня естьnavigation.tsx:

interface Location extends IdNameObject {...}

interface Props {
    updateSelectedLocation: (location: Location) => void;
}

class Navigation extends React.Component<Props> {
    public render(): any {
        const {updateSelectedLocation} = this.props;
        return <Selectpicker onToggleItem={updateSelectedLocation}/>;
    }
}

function mapDispatchToProps(dispatch: DispatchType) {
    return {
        updateSelectedLocation: (location: Location) => {
            dispatch(updateSelectedLocation(location));
        },
    }
}

export default connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps)((Navigation as any));

С другой стороны у меня есть интерфейс selectpicker.tsx:

Расположение расширяет IdNameObject {...}

interface Props {
    onToggleItem: (item: IdNameObject) => void;
}

export class Selectpicker extends React.Component<Props> {
    public render(): any {
        const {onToggleItem} = this.props;
        return <Dropdown contentOnToggleItem={onToggleItem}/>;
    }
}

Answer 1

Определяя параметр типа T для onToggleItem, вы сказали, что каждый вызывающий компонент selectpicker должен предоставить реализацию onToggleItem, которая работает для каждого T.Я думаю, что вы хотите, чтобы вызывающий компонент selectpicker выбирал тип T объектов, выбираемых при создании selectpicker, а затем предоставлял реализацию onToggleItem, которая работает для этого конкретного T.Для этого необходимо определить T в компоненте selectpicker и в интерфейсе реквизита, который содержит onToggleItem (если вы его используете), а не в самом onToggleItem.

Если вывозникли проблемы с выполнением этой работы, пожалуйста, добавьте больше вашего кода (как минимум, объявление класса selectpicker) к вопросу.

Обновление

На основе примера кода, вот каквы бы добавили T к selectpicker.tsx:

interface Props<T extends IdNameObject> {
    onToggleItem: (item: T) => void;
}

export class Selectpicker<T extends IdNameObject> extends React.Component<Props<T>> {
    public render(): any {
        const {onToggleItem} = this.props;
        return <Dropdown contentOnToggleItem={onToggleItem}/>;
    }
}

Затем, в navigation.tsx, TypeScript должен сделать вывод, что ваш элемент <Selectpicker ... /> использует T = Location.Вы также можете явно указать <Selectpicker<Location> ... />.