Как проверить тип атрибута «target.dataset» входного тега в машинописи

Question

Атрибут «набор данных» всегда запрещен HTMLInputElement.

Я искал документ Типы DOM .Везде нет ни «данных», ни «набора данных».

Конечно, можно использовать лайки типа «не ноль» под «ключом переменных» в changeLoginValue.

export interface LoginForm {
    id: string;
    password: string;
    [key: string]: string;
}

export interface ILoginStore {
    loginValue: LoginForm;
    changeLoginValue(e: React.ChangeEvent<HTMLInputElement>): void;
}

class LoginStore implements ILoginStore {
    @observable loginValue: LoginForm = {
        id: '',
        password: '',
    }

    @action.bound changeLoginValue(e: React.ChangeEvent<HTMLInputElement>): void {
        const key = e.target.dataset.name!;
        this.loginValue[key] = e.target.value;
    }
}

Этопрекрасно работает в приложении.

Но в машинописи это выглядит немного хитро, и самое главное, что он всегда не может быть скомпилирован в jest.

мой тестовый код

import LoginStore from './loginStore';

describe('LoginStore', () => {
    it('change id and password in loginValue', () => {
        const event = {
            target: {
                dataset: {
                    name: 'id',
                },
                value: 'abcdef',
            },
          } as React.ChangeEvent<HTMLInputElement>;

        LoginStore.changeLoginValue(event);

        expect(LoginStore.loginValue.id).toBe('abcdef');
    })
})

Показывает ошибку машинописного текста при объявлении «const-события»:

Преобразование типа '{target: {dataset: {name: string;};значение: строка;};} 'тип' ChangeEvent 'может быть ошибкой, потому что ни один тип не совпадает с другим.Если это было сделано намеренно, сначала преобразуйте выражение в «неизвестное».

Тип '{target: {dataset: {name: string;};значение: строка;};} 'отсутствуют следующие свойства из типа' ChangeEvent ': nativeEvent, currentTarget, пузырьки, отмена и еще 10.ts (2352) ###

Как использовать атрибут «набор данных»?Нужно ли для этого настраивать пользовательский интерфейс?

Я использую

"babel-jest": "^24.5.0",
"jest": "^24.5.0",
"typescript": "^3.4.1"
"ts-jest": "^24.0.1",

Answer 1

event - это макет React.ChangeEvent.

. Он никогда не будет соответствовать ожидаемому типу (он не будет реализован nativeEvent, currentTarget, bubbles, cancelable,и т...

... для отказа от проверки типов и пропуска значений через проверки во время компиляции.

---

const event: any = {  // <= use 'any' for the mock
  target: {
    dataset: {
      name: 'id',
    },
    value: 'abcdef',
  },
};