TypeScript ValidityState

const input: HTMLElement = e.target
const validity: ValidityState = input.validity
setValidity(validity.valid)

I'm just getting into typescript and having a problem with the ValidityState API: the second line gets a red squiggly underline with Unsafe assignment of an 'any' value.

What's the proper course of action here?

Comments

[harry]

HTMLElement does not have readonly validity: ValidityState property. Only the following elements have that property.

github.com/microsoft/TypeScript/bl...

• HTMLButtonElement
• HTMLFieldSetElement
• HTMLInputElement
• HTMLObjectElement
• HTMLOutputElement
• HTMLSelectElement
• HTMLTextAreaElement

If you are using React, you can write as follows:

TS playground link

const input: React.FC = () => {
    return (
        <input onChange={(e) => {
          const input: HTMLInputElement = e.target
          const validity: ValidityState = input.validity
          setValidity(validity.valid)
        }}/>
    )
}

or

const input: React.FC = () => {
    return (
        <input onChange={(e) => {
          // e: React.ChangeEvent<HTMLInputElement>
          setValidity(e.target.validity.valid)
        }}/>
    )
}

[harry]

Or if you wanted to define a handler function, you can write as follows:

const handler: (e: React.ChangeEvent<HTMLInputElement>) => void = (e) => {
    // ...
}

or

const handler = (e: React.ChangeEvent<HTMLInputElement>): void => {
    // ...
}

[Pavel M]

Thanks a bunch! It helped a lot.