Get input value with TypeScript

Tenemos varias estrategias. Destacamos:

Estrategia 1

Menos correcto puesto que obtendríamos un error en tiempo de ejecución si por ejemplo no existiera el elemento con ese nombre.

Ejemplo de código en React

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault()
  const { elements } = event.currentTarget

  const input = elements.namedItem('name-input') as HTMLInputElement
}

Estrategia 2

Mucho más correcto con un mínimo coste de proceso.

Tener en cuenta lo que devuelve namedItem:

• Element
• RadioNodeList
• null

(method) HTMLFormControlsCollection.namedItem(name: string): Element | RadioNodeList | null

Ejemplo de código en React

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const { elements } = event.currentTarget
    const input = elements.namedItem('name-input')
    const isInput = input instanceof HTMLInputElement
    if (!isInput || input === null) return
}