Discussion on: TypeScript ValidityState

[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 => {
    // ...
}