Cómo usar TypeScript en un Proyecto Web Simple

Dominar cómo usar TypeScript en un proyecto web es el paso natural para cualquier desarrollador que busque escribir código más robusto, escalable y libre de errores. Migrar desde JavaScript para configurar TypeScript desde cero es un proceso lógico que transforma tu flujo de trabajo, aportando seguridad mediante el tipado estático.

En este tutorial de TypeScript en español, aprenderás paso a paso cómo preparar tu entorno de desarrollo, instalación inicial con la herramienta vite, generación del archivo tsconfig.json. El objetivo es que puedas aprovechar las ventajas del tipado estático en la construcción de aplicaciones, te ahorrarás tiempo valioso que antes gastabas en depuraciones.

TypeScript para principiantes en Desarrollo Web

1. Cómo Inicializar Proyecto TypeScript NPM
   1. Configurar Compilador TypeScript
   2. Estructura de un Proyecto con TypeScript
   3. Cómo Ejecutar TypeScript en el Navegador
2. Crear Clases en TypeScript
3. Instalación de clases y manipulación del DOM
4. Ejecutar Proyecto

Cómo Inicializar Proyecto TypeScript NPM

Necesitaras tener instalado NodeJS y NPM para poder inicializar un proyecto TypeScript con NPM, si no los tienes instalados, puedes seguir este paso a paso.

También necesitamos vite, si no lo tienes instalado, al ejecutar el comando para crear un nuevo proyecto, la terminal te mostrará un mensaje para instalarlo (no importa si es Windows o Linux), por lo que debes responder que si deseas instalar vite.

Vite es una herramienta de construcción (build tool) de última generación que ha venido a reemplazar a herramientas más pesadas como Webpack. Por ahora no interesa que viene a reemplazar, pero si nos interesa saber que es una herramienta para compilar TypeScript a JavaScript pre-configurada en nuestro proyecto. Actualmente es muy utilizada por la comunidad para configurar TypeScript desde cero.

Para crear un proyecto vite y TypeScript, nos ubicamos en algún directorio de la computadora y ejecutamos el siguiente comando. La terminal te hará unas preguntas de configuración que básicamente son:

1. Nombre del proyecto.
2. Tipo de proyecto - Seleccionar Vanilla.
3. Y si es un proyecto TypeScript o JavaScript, seleccionar TypeScript.

npm create vite@latest

Después de la ejecución del comando, vite crea por nosotros un proyecto pre-configurado y listo para desarrollar con TypeScript. Puedes abrir tu proyecto con tu editor de código de preferencia (yo uso vscode 😎).

Configurar Compilador TypeScript

Hay muchas maneras de configurar el compilador TypeScript (su función es pasar el código de TypeScript a JavaScript), afortunadamente para nosotros, vite ya nos realiza esta tarea, así que lo importante a mencionar acá es el archivo tsconfig.json quien es el encargado de la configuración de compilación.

Vite crea archivo tsconfig json por nosotros con unos valores y parámetros por defecto, por ahora no debemos cambiar ni configurar nada adicional sobre tsconfig.json, así como esta es mas que suficiente para nuestro propósito. Esto ya es un ejemplo de proyecto simple con TypeScript.

Estructura de un Proyecto con TypeScript

Abres el proyecto con tu editor de código de preferencia, elimina los archivos creados por defecto que no vamos a utilizar, borra el contenido de los archivos que si utilizaremos y crea los archivos nuevos que necesitaremos para el ejercicio. Al final, asegúrate de que el proyecto quede como se muestra en la imagen para nuestro ejercicio.

ButtonAdd.service.ts: Archivo TypeScript que controlará la lógica del botón incrementar en un contador.

ButtonDesc.service.ts: Archivo TypeScript que controlará la lógica del botón decrementar en un contador.

main.ts: Archivo TypeScript principal que esta relacionado (importado) en el documento HLTML.

style.css: Estilos básicos para el ejemplo, también esta relacionado (importado) en el documento HTML.

index.html: Archivo HTML principal.

El archivo index.html tendrá el siguiente contenido. Importante mencionar que creamos un elemento section que contiene un elemento span (el resultado del contador), y un elemento div con dos elementos button para los eventos (clicks) de Aumentar y Decrementar el contador. A cada uno le asignamos una propiedad id, este id lo vamos a utilizar desde nuestros archivos TypeScript para agregar funcionalidades a nuestra página HTML.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="/src/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contador TypeScript</title>
</head>

<body>
    <section>
        <span id="idCounter">0</span>
        <div>
            <button id="idButtonDesc">Decrementar</button>
            <button id="idButtonAdd">Aumentar</button>
        </div>
    </section>
    <script type="module" src="/src/main.ts"></script>
</body>

</html>

<script type="module" src="/src/main.ts"></script>

<link rel="stylesheet" href="/src/style.css">

El archivo style.css tiene estilos básicos con el propósito de alinear los elementos, no es el objetivo de este artículo entrar en detalle sobre css, pero a decir verdad, son muy sencillos y podrás entenderlos fácilmente.

section{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section button{ 
    width: 100px;
}

section span{
    margin-left: 100px;
}

Cómo Ejecutar TypeScript en el Navegador

Con estos preparativos, ya estamos listos para trabajar en lo importante, en TypeScript, pero antes de empezar, en la raíz del proyecto ejecutas el comando de vite para iniciar el servidor en modo desarrollo:

npm run dev

En el navegador web y en la dirección http://localhost:5173 puedes ver el contenido HTML y el CSS que hemos preparado. Esta es la forma como ejecutar TypeScript en el navegador.

Crear Clases en TypeScript

Para crear componentes HTML con TypeScript paso a paso, primero definimos una clase en nuestro archivo ButtonAdd.service.ts

export class ButtonAddService{

    private button: HTMLButtonElement;
    private counter: HTMLSpanElement;

    constructor(){
        this.button = document.getElementById('idButtonAdd') as HTMLButtonElement;
        this.counter = document.getElementById('idCounter') as HTMLSpanElement;
    }
}

1. La variable button la creamos para conseguir la referencia al botón de Aumentar a través de su id.
2. La variable counter la creamos para conseguir la referencia al texto del contador que esta en el componente span, también a través de su id.
3. El constructor se ejecuta automáticamente cuando creamos un objeto de esta clase por primera vez, esta sección del código es la ideal para obtener las referencias a los componentes HTML de nuestra página web.

En la misma clase ButtonAddService creada previamente, vamos a crear el método que controlará el evento de hacer click sobre el botón de Aumentar. El objetivo del método es el siguiente:

1. Obtener el texto del componente span y convertirlo en un valor numérico.
2. Sumar Uno (1).
3. Establecer el nuevo resultado en el componente span convirtiendo el valor numérico a una cadena de texto.

private handle_click(): void{
    const count: number = parseInt(this.counter.textContent) + 1;
    this.counter.textContent = count.toString();
}

En este punto ya tenemos las referencias a los componentes HTML desde nuestra clase TypeScript, también tenemos el método con la lógica de incrementar nuestro contador, ahora nos falta agregarle a nuestro botón la funcionalidad de poder escuchar el evento cuando se realiza click sobre el.

Para conseguirlo, en la misma clase ButtonAddService creamos el siguiente método, que en resumen traduciria lo siguiente:

Si existe el botón y no es de valor nulo, agregarle el evento de escucha llamado click y cuando ocurra un click ejecuta el método handle_click.

initialize(): void{
    if(this.button){
        this.button.addEventListener('click', () => this.handle_click());
    }
}

En resumen, nuestra clase ButtonAddService ya tiene las siguientes funcionalidades:

1. Obtenemos la referencia del componente HTML del botón Aumentar.
2. Obtenemos la referencia del componente HTML donde se muestra el resultado numérico del contador (span).
3. Un método que contiene la lógica para aumentar el contador.
4. Un método para agregar el evento de escucha click al botón aumentar del contador.

El código completo quedaría así:

export class ButtonAddService{

    private button: HTMLButtonElement;
    private counter: HTMLSpanElement;

    constructor(){
        this.button = document.getElementById('idButtonAdd') as HTMLButtonElement;
        this.counter = document.getElementById('idCounter') as HTMLSpanElement;
    }

    private handle_click(): void{
        const count: number = parseInt(this.counter.textContent) + 1;
        this.counter.textContent = count.toString();
    }

    initialize(): void{
        if(this.button){
            this.button.addEventListener('click', () => this.handle_click());
        }
    }
}

Instalación de clases y manipulación del DOM

¿Qué nos hace falta? Buscar la manera que nuestro documento HTML pueda estar relacionado por algún mecanismo con esta clase TypeScript, ¿Cómo lo conseguimos?, aquí entra al escenario nuestro archivo main.ts.

Si recuerdas el fragmento de HTML al inicio del artículo, tenemos una línea de código que relaciona nuestra página web con el archivo main.ts.

<script type="module" src="/src/main.ts"></script>

Ahora debemos relacionar el archivo main.ts con nuestra clase TypeScript, y lo haremos de la siguiente manera:

1. Importamos la clase ButtonAddService a nuestro archivo main.ts.
2. A la página web (representada como document) le agregamos el evento DOMContentLoaded que nos permite realizar acciones justo en el momento que el documento HTML carga en el navegador web.
3. Creamos un objeto de la clase ButtonAddService con el operador new. Aquí es justamente donde se ejecuta el constructor de la clase TypeScript y obtiene las referencias de los componentes HTML.
4. Una vez creado el objeto, llamamos al método que configura la forma de escuchar eventos de tipo click sobre el botón.

import { ButtonAddService } from "./ButtonAdd.service";

document.addEventListener('DOMContentLoaded', () => {
    
    const button_add = new ButtonAddService();
    button_add.initialize();
});

Y listo!, en enhorabuena, el botón Aumentar y mas de la mitad del ejercicio practico ya lo tienes completado, si revisas tu página web y das click sobre el botón Aumentar, debería estar funcionando esta parte del contador.

Y seguramente debes estar pensando que para el botón Decrementar es lo mismo, solo que el archivo TypeScript se llama ButtonDesc.service.ts, y estas en lo cierto, hay que seguir el mismo paso a paso que ya hicimos para el botón Aumentar, pero ahora enfocado para el botón Decrementar, así que acá dejo el resumen completo :

1. El archivo para Decrementar es ButtonDesc.service.ts
2. En el archivo ButtonDesc.service.ts se obtienen las referencias al contador (componente span) y al botón Decrementar, para los dos por medio de su id.
3. La lógica del método para el botón Decrementar es muy parecida a la lógica del método para Aumentar, la diferencia es que en vez de sumar, restamos.
4. El método que configura la forma de escuchar eventos de tipo click sobre el botón (en este caso Decrementar) también es el mismo.
5. En el archivo main.ts importamos la clase ButtonDescService.
6. Creamos un objeto de la clase ButtonDescService con el operador new. Aquí es justamente donde se ejecuta el constructor de la clase TypeScript y obtiene las referencias de los componentes HTML.
7. Una vez creado el objeto, llamamos al método que configura la forma de escuchar eventos de tipo click sobre el botón.

Código completo del archivo ButtonDesc.service.ts

export class ButtonDescService{

    private button: HTMLButtonElement;
    private counter: HTMLSpanElement;

    constructor(){
        this.button = document.getElementById('idButtonDesc') as HTMLButtonElement;
        this.counter = document.getElementById('idCounter') as HTMLSpanElement;
    }

    private handle_click(): void{
        const count: number = parseInt(this.counter.textContent) - 1;
        this.counter.textContent = count.toString();
    }

    initialize(): void{
        if(this.button){
            this.button.addEventListener('click', () => this.handle_click());
        }
    }
}

Código completo del archivo main.ts con la inclusión de ButtonDesc.service.ts

import { ButtonAddService } from "./ButtonAdd.service";
import { ButtonDescService } from "./ButtonDesc.service";

document.addEventListener('DOMContentLoaded', () => {
    
    const button_add = new ButtonAddService();
    button_add.initialize();

    const button_desc = new ButtonDescService();
    button_desc.initialize();
});

Ejecutar Proyecto

Y hasta aquí, ya debe estar completo tu ejercicio de contador, lo hemos creado utilizando el paradigma orientado a objetos, hemos creado dos clases separadas para controlar la lógica de cada botón (Aumentar y Decrementar) y tenemos un archivo main.ts que se encarga de crear los objetos de cada una de las clases para que estén disponibles en nuestro HTML.

Es posible que te preguntes, ¿Porqué hacer todo esto para un contador? y en parte es cierto, pero el contador no es porque vayas a crear un portafolio con esto, o no es una aplicación que el mundo empresarial vaya a solicitarte, es un ejercicio que considero muy oportuno para que aprendas a estructurar tus clases TypeScript, el paradigma de orientación a objetos y como vincular TypeScript con HTML.

Hay muchas razones desde el punto de vista técnico y experimental que sugieren esta implementación para realizar páginas web con HTML y TypeScript, y si quieres entender el porque (lo cual te sugiero mucho), a continuación hablaremos sobre las conclusiones y detalles.