Migración a TypeScript en Strapi

Contexto del Cambio

Este proyecto ha migrado de JavaScript a TypeScript para mejorar la calidad y mantenibilidad del código. TypeScript permite detectar errores en tiempo de compilación en lugar de tiempo de ejecución, lo que reduce la posibilidad de errores en producción. Además, proporciona tipado estático, lo que facilita el desarrollo y la colaboración, al ofrecer una documentación implícita y autocompletado en el entorno de desarrollo.

Alcance

La migración se ha aplicado específicamente a la funcionalidad relacionada con la gestión de slugs en la colección blogs. Esto incluye hooks de ciclo de vida (afterCreate y afterUpdate) y utilidades para limpiar el texto y actualizar los campos de la base de datos.

Ejemplo

Conversión de Archivos

Los archivos originalmente escritos en JavaScript se han convertido a TypeScript para aprovechar el sistema de tipos estático. A continuación, se detallan los cambios realizados:

Archivos Convertidos:

blog lifecycle hook: Este archivo maneja la creación y actualización de slugs basados en el título de un blog. Se ha migrado a TypeScript para añadir tipado y mejorar la claridad del código. utils/slug.js: Contiene la lógica para limpiar y generar el slug. Se ha convertido a TypeScript para aprovechar el tipado estático. utils/strapi-queries.js: Responsable de actualizar los campos en la base de datos Strapi. Se ha convertido a TypeScript para asegurar que las operaciones de base de datos se manejen correctamente.

Uso de Tipos

TypeScript mejora la robustez del código al permitir la definición explícita de tipos:

Tipos en el Hook de Ciclo de Vida:

• El parámetro event se tipa como any para flexibilidad, con la posibilidad de especificar tipos más precisos en el futuro.
• Las funciones afterCreate y afterUpdate se definen para retornar Promise<void>, indicando que son asíncronas y no devuelven valor.

Tipos en las Utilidades:

• La función updateSlugs ahora recibe parámetros tipados: number para id, string para title, y string para collection.
• La función updateFields utiliza Record<string, string> para garantizar que los pares clave-valor utilizados en las actualizaciones sean correctos.

Ejemplo de Código Migrado Archivo blog lifecycle hook (migrado a TypeScript):

import { updateSlugs } from "../../../../utils/slug";
const COLLECTION = "blogs";

export default {
  afterCreate: async (event: any): Promise<void> => {
    if (event.result.title) {
      await updateSlugs(event.result.id, event.result.title, COLLECTION);
    }
  },
  afterUpdate: async (event: any): Promise<void> => {
    if (event.result.title) {
      await updateSlugs(event.result.id, event.result.title, COLLECTION);
    }
  },
};

El codigo anterior del mismo hook(JavaScript):

"use strict";
const COLLECTION = "blogs";
const { updateSlugs } = require("../../../../utils/slug");

module.exports = {
  afterCreate: async (event, data) => {
    if (event.result.title) {
      await updateSlugs(event.result.id, event.result.title, COLLECTION);
    }
  },
  afterUpdate: async (event, data) => {
    if (event.result.title) {
      await updateSlugs(event.result.id, event.result.title, COLLECTION);
    }
  },
};

Archivo utils/slug.ts

import { updateFields } from "./strapi-queries";
export const updateSlugs = async function (
  id: number,
  title: any,
  collection: string
) {
  let update = {};
  const cleanText = title
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^\w\s]/g, "")
    .replaceAll(" ", "-")
    .toLowerCase();
  update["slug"] = cleanText;
  updateFields(id, update, collection);
};

Archivo utils/slug.js

const { updateFields } = require("../utils/strapi-queries");
module.exports = {
  updateSlugs: async function (id, title, collection) {
    let update = {};
    const cleanText = title
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g, "")
      .replace(/[^\w\s]/g, "")
      .replaceAll(" ", "-")
      .toLowerCase();

    update["slug"] = cleanText;
    updateFields(id, update, collection);
  },
};

Archivo utils/strapi-queries.ts:

import { Strapi } from "@strapi/strapi";
export const updateFields = async function (
  id: number,
  update: Record<string, string>,
  collection: string
) {
  await strapi.db.connection(collection).where({ id }).update(update);
};

Archivo utils/strapi-queries.js:

module.exports = {
  updateFields: async function (id, update, collection) {
    await strapi.db.connection(collection).where({ id }).update(update);
  },
};

Este enfoque con TypeScript asegura un código más seguro y mantenible, lo que es crucial para proyectos a largo plazo y colaboración en equipo. Los futuros desarrolladores se beneficiarán de un código más legible y menos propenso a errores.