🟦 CRUD en TypeScript con formulario de productos

En VBA, la fila 1 tiene los encabezados (ID, Nombre, Descripcion, IdCategoria, Entradas, Salidas, Cantidad). En TypeScript eso se declara con una interfaz: la forma que debe tener cada producto.

interface Producto {
    id: number;
    nombre: string;
    descripcion: string;
    idCategoria: number;
    entradas: number;
    salidas: number;
    cantidad: number;
}

const CLAVE = "productos"; // nombre de la "hoja" donde se guardan los datos

Los id de cada control son los mismos nombres del UserForm (txtNombre, btnCrear…), así el código se lee igual en los dos lenguajes.

<form onsubmit="return false">
    <label>ID <input id="txtID" type="number"></label>
    <label>Nombre <input id="txtNombre"></label>
    <label>Descripción <input id="txtDescripcion"></label>
    <label>ID Categoría <input id="txtIdCategoria" type="number"></label>
    <label>Entradas <input id="txtEntradas" type="number"></label>
    <label>Salidas <input id="txtSalidas" type="number"></label>
    <label>Cantidad <input id="txtCantidad" type="number"></label>

    <button id="btnCrear">Crear</button>
    <button id="btnBuscar">Buscar</button>
    <button id="btnActualizar">Actualizar</button>
    <button id="btnEliminar">Eliminar</button>
    <button id="btnLimpiar">Limpiar</button>
    <p id="mensaje"></p>
</form>

<table>
    <thead><tr><th>ID</th><th>Nombre</th><th>Descripción</th><th>IdCategoria</th><th>Entradas</th><th>Salidas</th><th>Cantidad</th></tr></thead>
    <tbody id="tablaProductos"></tbody>
</table>
<script src="app.js"></script>

Las mismas dos ideas de VBA (BuscarFilaPorID y LimpiarCampos), más leer y guardar la lista, leer un campo y el equivalente de Val().

function leerProductos(): Producto[] {
    return JSON.parse(localStorage.getItem(CLAVE) ?? "[]") as Producto[];
}

function guardarProductos(lista: Producto[]): void {
    localStorage.setItem(CLAVE, JSON.stringify(lista));
}

function campo(id: string): HTMLInputElement {
    return document.getElementById(id) as HTMLInputElement;
}

// Igual que Val() de VBA: texto vacío o inválido -> 0
function val(texto: string): number {
    const n = parseFloat(texto);
    return isNaN(n) ? 0 : n;
}

// Igual que BuscarFilaPorID: devuelve la posición o -1 si no existe
function buscarIndicePorID(lista: Producto[], id: number): number {
    return lista.findIndex(p => p.id === id);
}

function limpiarCampos(): void {
    ["txtID", "txtNombre", "txtDescripcion", "txtIdCategoria",
     "txtEntradas", "txtSalidas", "txtCantidad"].forEach(id => campo(id).value = "");
    campo("txtNombre").focus();
}

• JSON.stringify convierte la lista en texto para guardarla; JSON.parse la vuelve a convertir en lista.
• ?? "[]": si todavía no hay nada guardado, empieza con una lista vacía.
• findIndex recorre la lista como el For i = 2 To ultimaFila de VBA, pero en una línea. Devuelve -1 si no encuentra (VBA devolvía 0).

El código completo también trae mostrarMensaje() (en lugar de MsgBox) y pintarTabla(), que redibuja la tabla; los verás en el archivo completo del simulador.

En VBA cada botón tiene su evento btnCrear_Click. En TypeScript se conectan con addEventListener:

document.getElementById("btnCrear")!.addEventListener("click", crear);
document.getElementById("btnBuscar")!.addEventListener("click", buscar);
document.getElementById("btnActualizar")!.addEventListener("click", actualizar);
document.getElementById("btnEliminar")!.addEventListener("click", eliminar);
document.getElementById("btnLimpiar")!.addEventListener("click", limpiarCampos);
pintarTabla();

El navegador no entiende TypeScript: hay que compilarlo a JavaScript. Con Node.js instalado:

npm install -g typescript
tsc app.ts --target es2020 --lib dom,es2020 --strict

Eso crea app.js junto a app.ts. Abre index.html y el CRUD funciona. En la sección del simulador puedes descargar los tres archivos listos.