Какой тип нужно выбрать?

Question

[ivankirshin]

Не знаю, вопрос больше по реакту или ts.
Как я понимаю, target в данном случае является более широким типом и нужно его сузить, чтобы гарантировать наличие dataset у элемента.
Как лучше это сделать?
Метод обработчик события клика по элементу
Error:(47, 80) TS2339: Property 'dataset' does not exist on type 'EventTarget'.

Answer 1

[twolegs]

Использовать generic для MouseEventHandler:
deleteItem: React.MouseEventHandler<T>
Где T - нужный вам тип, включающий dataset

Comments

[ivankirshin]

React.MouseEventHandler<HTMLElement> так тоже пытался. Все работает также.
Или я что-то не то передаю?

[twolegs]

В HTMLElement нет поля dataset. Либо используйте тип, который действительно в target передается, либо как минимум

React.MouseEventHandler<HTMLElement & { dataset: string }>

Answer 2

[Роман Александрович]

можете попробовать так
(e:MouseEvent<{dataset:string}>)=>{

Comments

[ivankirshin]

Про нативный MouseEvent пишет, что это не дженерик
А если реактовский, то все та же ошибка(

[Роман Александрович]

ivankirshin, Странно. Так тоже не работает ?

interface Event extends React.MouseEvent{
  dataset:string
}

const deleteItem = React.MouseEventHandler = (event:Event)=>{}

[Роман Александрович]

ivankirshin, покажите весь код

[Роман Александрович]

ivankirshin, покажите весь код

[ivankirshin]

Роман Александрович,

export enum filters {
    'all', 'active', 'completed'
}

type stateTypes = {
    items: IToDoListItem[],

    filterSelected: filters,
}

const item: IToDoListItem = {
    id: 1,
    title: 'First notification',
    date: new Date(),
    status: false,
};

interface Event extends React.MouseEvent {
    dataset: string
}

class AppToDo extends React.Component<{}, stateTypes> {
    state = {
        items: [item],
        filterSelected: filters.all,
    };

    deleteItem: React.MouseEventHandler = (e: Event) => {
        const items = this.state.items.filter(item => item.id === e.target.dataset.id);
        this.setState({items});
    };

    changeItemStatus: ChangeEventHandler = (e) => {
        console.log();
    };

    render() {
        return (
            <ThemeProvider theme={theme}>
                <ContainerApp>
                    <AddItem/>
                    <ListItems items={this.state.items}
                               handlerDeleteItem={this.deleteItem}
                               handlerChangeStatus={this.changeItemStatus}
                    />
                    <Filter filterSelected={this.state.filterSelected}/>
                </ContainerApp>
            </ThemeProvider>
        );
    }
}

[Роман Александрович]

ivankirshin, React.MouseEventHandler = (e: ListItems)
Если так не сработает, то залейте код на https://codesandbox.io/

[ivankirshin]

Роман Александрович, Error:(46, 47) TS2749: 'ListItems' refers to a value, but is being used as a type here.
Я обнаружил, что если сделать так React.MouseEventHandler, то dataset появляется у currentTarget. А на просто target, этот способ, вероятно, вообще не влияет