En el desarrollo de aplicaciones modernas con TypeScript, uno de los desafíos recurrentes es la falta de sincronización entre las clases definidas en archivos SCSS y su uso dentro de los componentes. typed-scss-modules es una herramienta diseñada para cerrar esta brecha, generando automáticamente archivos de definición de tipos (.d.ts) a partir de tus módulos SCSS.

Propósito de la herramienta

El objetivo principal es proporcionar seguridad de tipos (type-safety) y autocompletado inteligente. Al utilizar esta herramienta, el compilador de TypeScript podrá advertirte si intentas usar una clase de CSS que no existe o que ha sido renombrada, evitando errores visuales en tiempo de ejecución.

Instalación del módulo

Para integrar esta utilidad en tu flujo de trabajo, primero debes añadirla como una dependencia de desarrollo:

# Usando npm
npm install --save-dev typed-scss-modules

# Usando yarn
yarn add -D typed-scss-modules

Configuración y ejecución básica

Aunque la herramienta puede funcionar de forma independiente, es recomendable asegurar que tu archivo tsconfig.json permita la interoperabilidad de módulos. Asegúrate de tener las siguientes opciones configuradas:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

Para generar los tipos de forma manual por primera vez, puedes ejceutar el comando apuntando a tu directorio de estilos:

npx typed-scss-modules src/ui/styles

Esto procesará los archivos .scss y creará archivos adjuntos con la extensión .scss.d.ts que contienen las interfaces de las clases exportadas.

Ejemplo de implementación en React

Una vez generados los tipos, la importación de estilos en tus componentes de TypeScript se vuelve mucho más robusta. A continuación, se muestra cómo se vería la implementación de un componente de interfaz:

import React from 'react';
import clases from './BotonPersonalizado.module.scss';

interface Props {
  texto: string;
  esPrimario: boolean;
}

const BotonBase: React.FC<Props> = ({ texto, esPrimario }) => {
  return (
    <button className={esPrimario ? clases.btnActivo : clases.btnInactivo}>
      {texto}
    </button>
  );
};

export default BotonBase;

Estrategias de automatización

Para mantener la agilidad durante el desarrollo, no es práctico ejecutar el comando manualmente cada vez que cambias un estilo. Se recomiendan las siguientes prácticas:

• Modo Observador (Watch Mode): Utiliza el flag --watch para que la herramienta detecte cambios en tiempo real y regenere los tipos automáticamente.
• Scripts de NPM: Añade un comando en tu package.json para facilitar el acceso: ``` "scripts": { "gen-types": "tsm src --watch" }

• Consistencia de Nombres: Emplea la opción --camelCase si prefieres trabajar con la convención clases.nombreDeClase en lugar de clases['nombre-de-clase'].

Integración con frameworks modernos

En entornos como Next.js o proyectos basados en Webpack, la integración suele hacerse mediante la ejecución en paralelo de los procesos de desarrollo. Si utilizas Next.js, puedes configurar un script que inicie tanto el servidor de desarrollo como el generador de tipos para asegurar que las definiciones siempre estén actualizadas respecto a tus módulos de CSS.

Para proyectos con configuraciones personalizadas de Webpack, es posible añadir un loader específico o simplemente dejar que typed-scss-modules actúe como un proceso independiente, lo cual suele ser más ligero y menos propenso a conflictos con el pipeline de compilación principal.