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

Question

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

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

当然，可以在changeLoginValue中的“变量键”下方使用“非空”类型。

val locationRequest = LocationRequest().apply {
        interval = 10000
        fastestInterval = 2000
        priority = LocationRequest.PRIORITY_HIGH_ACCURACY
        numUpdates = 1
    }

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

但是在打字稿中似乎有些棘手的方式，最重要的是，它总是无法以笑话进行编译。

我的测试代码是

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;
    }
}

在声明“ const event”时显示打字稿错误：

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

键入'{目标：{数据集：{名称：字符串； };值：字符串； }; }”缺少类型'ChangeEvent'的以下属性：nativeEvent，currentTarget，气泡，cancellable和另外10个。ts（2352）###

如何使用“数据集”属性？ 我必须为此创建自定义界面吗？

我正在使用

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');
    })
})

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',
  },
};