如何在TypeScript中验证input标签的“target.dataset”属性类型

Question

"

“dataset”属性始终不允许在HTMLInputElement中使用。

我查阅了DOM类型的文档，但未发现任何“data”或“dataset”的存在。

当然，在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;
    }
}

它在应用程序中很好地工作。

但在TypeScript中似乎有一些棘手的问题，最重要的是它总是无法在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 event”时，它显示typescript错误：

将类型'{ target: { dataset: { name: string; }; value: string; }; }'转换为类型'ChangeEvent'可能是一个错误，因为两种类型都不足以完全重叠。如果这是有意的，请先将表达式转换为'unknown'。

类型'{ target: { dataset: { name: string; }; value: string; }; }'缺少类型'ChangeEvent'的以下属性：nativeEvent、currentTarget、bubbles、cancelable和其他10个.ts(2352) ###

如何使用“dataset”属性？ 我需要为此创建自定义接口吗？

我正在使用

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

- Dylan Ju

Answer 1

event是React.ChangeEvent的一个模拟。

它永远不会匹配预期类型（它不会实现nativeEvent、currentTarget、bubbles、cancelable等）。

在这种情况下，您知道您的模拟与预期类型不匹配，并且希望TypeScript仍然让它通过，您可以使用any类型...

...来选择退出类型检查并让值通过编译时检查。

---

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

- Brian Adams

---

非常感谢。我完全理解了你的回答，但不想使用“任何”....所以现在我放弃使用“数据集”，改用“名称”属性。再次感谢，但很抱歉由于缺乏stackoverflow声望，我无法投票支持你的回答。 - Dylan Ju