Проверка типов параметров в Typescript

Question

Проверка типов параметров в Typescript

1

Я пытаюсь проверить тип моих параметров в компоненте React/Typcript

foo(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
    if(e is mouse event) {
        //do something
    }
    else if (e is KeyboardEvent) {
        //do something else
    }
}

Как я могу написать условия if/else?

ZeroDarkThirty 17 апр. 2018, в 08:22

Источник

1

Может быть проще зарегистрировать разные обработчики для событий мыши и клавиатуры, и тогда вам вообще не нужно будет включать тип события?
Shorn 17 апр. 2018, в 06:33

Теги:

reactjs

typescript

2 ответа

Ещё вопросы

Может быть проще зарегистрировать разные обработчики для событий мыши и клавиатуры, и тогда вам вообще не нужно будет включать тип события?

Shahid Peerzade · Answer 1 · 2018-04-17T07-16-00.000Z

2

Вы можете использовать свойство event.type. для более подробного объяснения просьба обращаться к этим документам SyntheticEvent

Shahid Peerzade 17 апр. 2018, в 07:16

0

В сочетании с надписью это будет более ориентировано на машинопись, но, безусловно, это хороший способ проверить :)
Titian Cernicova-Dragomir 17 апр. 2018, в 05:59
0

я попытался, if(e.type === React.MouseEvent<HTMLElement>) но он выдает ошибку e.type === React.MouseEvent<HTMLElement>
ZeroDarkThirty 17 апр. 2018, в 06:14
0

@ZeroDarkThirty это не тип в машинописном смысле слова, это строка
Titian Cernicova-Dragomir 17 апр. 2018, в 06:19
0

так event.type один только event.type не может сделать то, чего я пытаюсь достичь?
ZeroDarkThirty 17 апр. 2018, в 06:20
0

Это может в сочетании с охранниками типа :) type могут быть либо из этих строк для событий мыши: onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp reactjs.org/docs/events.html#mouse- События
Titian Cernicova-Dragomir 17 апр. 2018, в 06:21
0

@ZeroDarkThirty, что я говорю в своем ответе, все еще остается в силе, о типах, которые будут удалены, и о необходимости тестирования со свойствами, это, возможно, более точный способ определения типа
Titian Cernicova-Dragomir 17 апр. 2018, в 06:22

Показать ещё 4 комментария

Titian Cernicova-Dragomir · Answer 2 · 2018-04-17T07-19-00.000Z

React.MouseEvent и React.KeyboardEvent определены как интерфейсы, и, таким образом, для этих типов нет представления во время выполнения. Мы можем создать тип-хранитель, чтобы различать типы, и мы можем использовать свойства, определенные на объекте, фактически проверять, соответствует ли объект интерфейсу:

function isMouseEvent<T>(e: any | React.MouseEvent<T>) : e is React.MouseEvent<T> {
    let eMouse = e as React.MouseEvent<T>;
    // Can test for other properties as well
    return eMouse && typeof eMouse.pageX === "number" && typeof eMouse.pageY === "number"
}

function isKeyboardEvent<T>(e: any | React.KeyboardEvent<T>) : e is React.KeyboardEvent<T> {
    let eKey= e as React.KeyboardEvent<T>;
    // Can test for other properties as well
    return eKey&& typeof eKey.charCode === "number" && typeof eKey.key === "string"
}

function foo(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
    if(isMouseEvent(e)) {
        e // will be React.MouseEvent<HTMLElement>
    }
    else {
        e // will be React.KeyboardEvent<HTMLElement> by exclusion, or we could use the other type guard
    }
}