[TypeScript] React.KeyboardEventHandler<HTMLInputElement> 에서 event.target.value 에러

❗타입스크립트 React.KeyboardEventHandler<HTMLInputElement> 에서

event.target.vale 사용시 에러 이슈

 

1. 타입스크립트를 처음 사용하면서, onKeyup 이벤트를 전달 시 발생한 에러 이슈이다.

<input
    	onKeyUp={inputRegexCheck}
        />

이렇게 Input에서 onKeyUp 이벤트를 발생시켜 이벤트를 전달하면

 

2. 타입스크립트에서 타입을 명시해 주어야 한다.

마우스 hover 시 참고되어있는 이벤트 타입인 React.KeyboardEventHandler<HTMLInputElement>으로 지정해 주었더니

event.target.value에서 에러가 발생했다.

이유는 타입스크립트에서 KeyboardEvent에 target 속성은 정의 되어있지 않기 때문인 것 같다.

index.d.ts에서 확인해 보면 target속성이 정의되어있지 않다.

interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {
        altKey: boolean;
        /** @deprecated */
        charCode: number;
        ctrlKey: boolean;
        code: string;
        /**
         * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
         */
        getModifierState(key: ModifierKey): boolean;
        /**
         * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
         */
        key: string;
        /** @deprecated */
        keyCode: number;
        locale: string;
        location: number;
        metaKey: boolean;
        repeat: boolean;
        shiftKey: boolean;
        /** @deprecated */
        which: number;
    }

 

 

 

3. 해결방법은 event.target을 => event.currentTarget 으로 대체하여 사용한다.

  const inputRegexCheck = (event: React.ChangeEvent<HTMLInputElement>) => {
    const regExp = /[^a-z0-9#?!@$%^&*-]/g;
    const input = event.target;
    if (regExp.test(input.value)) {
      input.value = input.value.replace(regExp, '');
    }
  };

 

더이상 오류가 뜨지 않는 것을 확인할 수 있다.