Typescript validar formulario

Para aquellos que se encuentran aprendiendo Typescript con el objetivo de mejorar la calidad de su Javascript, o son meros curiosos, voy a dejar un ejemplo completo donde se valida un sencillo campo: un nombre.

Entre sus poderes nos encontramos.

El nombre no debe estar vacío.
El nombre no debe ser un número.

Mostrar mensajes de error dentro de un

Enviar formulario si pasa las validaciones.

HTML


<form id="formulario">
    <p>
        <ul id="errores"></ul>
    </p>
    <p>
    <label>
        Nombre:
        <input type="text" name="nombre" id="nombre">
    </label>
    </p>
    <p>
        <input type="button" id="guardar" value="Guardar">
    </p>
</form>

Typescript


//======================================================================
// VARIABLES
//======================================================================
let formulario: HTMLFormElement = document.querySelector('#formulario')
let erroresUl: HTMLUListElement = document.querySelector('#errores')
let inputNombre: HTMLInputElement = document.querySelector('#nombre')
let botonGuardar: HTMLButtonElement = document.querySelector('#guardar')

//======================================================================
// FUNCIONES
//======================================================================

/**
 * Método que valida y enviar el formulario
 */
function enviarFormulario(): void {

    // Variables
    let errores: string[] = []

    // Validamos nombre
    //// ¿Es un numero?
    if (isNaN(parseInt(inputNombre.value))) errores.push('El nombre no puede ser un número')
    //// Es obligatorio
    if (inputNombre.value === '') errores.push('El nombre es obligatorio')

    // Mostramos los errores
    imprimirErrores(errores)

    // Enviamos formulario
    if (errores.length === 0) formulario.submit()
}

/**
 * Imprime todos los errores en el UL
 * @param errores Array - Frases de error
 */
function imprimirErrores(errores: string[]): void {
    // Limpiamos los errores anteriores en HTML
    erroresUl.textContent = ''
    // Generamos todos LI con su mensaje
    errores.forEach(function(mensaje) {
        // Creamos nuevo LI
        let nuevoLi = document.createElement('li')
        nuevoLi.textContent = mensaje
        // Lo añadimos dentro de nuestro UL
        erroresUl.appendChild(nuevoLi)
    })
}

//======================================================================
// EVENTOS
//======================================================================

botonGuardar.addEventListener('click', enviarFormulario)