如何在打字稿中验证输入标签的类型“target.dataset”属性

Question

“数据集”属性始终不允许使用 HTMLInputElement。

我搜索了DOM types的文档。任何地方都没有“数据”或“数据集”。

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

它在应用程序中运行良好。

但这在打字稿中似乎有些棘手，最重要的是它总是无法开玩笑地编译。

我的测试代码是

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”时显示打字稿错误：

类型转换'{目标：{数据集：{名称：字符串； };值：字符串； }; }' 键入 'ChangeEvent' 可能是一个错误，因为这两种类型都没有与另一种充分重叠。如果这是故意的，请先将表达式转换为“未知”。

类型'{目标：{数据集：{名称：字符串； };值：字符串； }; }' 缺少来自“ChangeEvent”类型的以下属性：nativeEvent、currentTarget、bubbles、cancelable 和 10 more.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 等）。

对于此类情况，您知道您的模拟与预期类型不匹配，并且您希望 TypeScript 让它通过，您可以使用 any 类型...

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

---

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