TypeScript ValidityState

#help #typescript #beginners

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?

Discussion (5)

harry • May 12

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)
        }}/>
    )
}

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

harry • May 12

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

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

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

Luke Shiru • May 12

You can also use ChangeEventHandler:

const handler: ChangeEventHandler<HTMLInputElement> = event => {
  // handle event
}

Tho generally, if you inline the handler, you don't need to type it because the type is inferred automatically.

Luke Shiru • May 12

A few recommendations that might help:

Use currentTarget instead of target. The target property of Event points to the element that triggered the event, but currentTarget points to the element that has the event listener, which is almost always what you actually want.
In TS you don't need to type every single thing, if you type one thing, everything else can be inferred automatically:

// We type `currentTarget` as `HTMLInputElement`
const input = event.currentTarget as HTMLInputElement;

// Then everything else is correctly inferred, not types needed:
const { validity } = input;
setValidity(validity.valid);

You could also simplify it quite a bit if you only need the validity.valid value:

const { validity: { valid } } = event.currentTarget as HTMLInputElement;
setValidity(valid);

// or
setValidity((event.currentTarget as HTMLInputElement).validity.valid);

Ideally (idk what framework or library are you using), you should have your event typed so the type of currentTarget and target are inferred. In React that's done for you with the *EventHandler types, with Angular you have other solutions, but it depends on what you're using.

Hope that helps a little.
Cheers!