LissetteIbnz

LissetteIbnz

Utilizar i18n de una forma más eficiente (versión JS y JSDoc)

Subscribe to my newsletter and never miss my upcoming articles

En mi anterior post te explicaba cómo poder utilizar i18n con un objeto en TypeScript. Ahora te mostraré cómo hacerlo en un proyecto sin TypeScript, mediante el uso de JSDoc.

Solución con JSDoc y JavaScript

Partimos de la misma función pero esta vez en JavaScript:

export const extractObjectPath = (obj) => {
  const result = {};

  const recursivePathCalculation = (source, rootPath = [], target = result) => {
    for (const key in source) {
      if (source.hasOwnProperty(key)) {
        const path = rootPath.slice();
        path.push(key);

        const value = source[key];
        if (value !== null && typeof value === "object") {
          recursivePathCalculation(value, path, (target[key] = {}));
        } else {
          target[key] = path.join(".");
        }
      }
    }
  };
  recursivePathCalculation(obj);

  return result;
};

Recuerda que esta función nos retorna una estructura de objeto donde cada propiedad es un nivel de nuestro objeto traductor.

Para poder usarla, vamos a exportar un objeto donde llamaremos a la función anterior pasando como parámetro un objeto de traducciones.

export const tkeys = extractObjectPath({ ...es });

Y ahora llega la magia...✨ para poder inferir el tipado vamos a añadir mediante JSDoc el siguiente tipo:

/** @type typeof es */
export const tkeys = extractObjectPath({ ...es });

Fíjate que cuando decimos typeof es nos referimos a que el tipo será "el valor" que tenga el objeto que le digamos, en este caso al objeto es que se corresponde con la importación de mi fichero de traducciones al castellano.

De este modo, conseguiremos que al usar este objeto tkeys que previamente hemos importado, apoyarnos en el autocompletado que nos facilita el IDE:

DemoTKeys.gif

🔥 Aquí puedes probarla y ver el código completo:

¿Qué te ha parecido? Espero que te sirva de ayuda.

👉 En un siguiente artículo le daremos un giro de tuerca más 🔩 y te mostraré otra forma también muy interesante de conseguir tus traducciones 👩‍💻

 
Share this