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

Posted 2023-02-22

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

【英文标题】：How to validate type "target.dataset" attribute of input tag in typescript

【发布时间】：2019-08-25 16:31:19

【问题描述】：

“数据集”属性始终不允许使用 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",

【参考方案1】：

event 是 React.ChangeEvent 的模拟。

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

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

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

---

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

【讨论】：

非常感谢。我完全理解您的回答，但不想使用“任何”......所以现在我放弃使用“数据集”并使用“名称”属性。再次感谢，但由于缺乏 *** 声誉，我无法投票给您的答案。