Configuración de TypeScript en Proyectos Existentes

En este módulo, aprenderemos cómo configurar TypeScript en un proyecto JavaScript existente. Veremos los pasos para instalar TypeScript, crear un archivo de configuración tsconfig.json y configurar nuestro entorno de desarrollo para trabajar con TypeScript.

Instalación de TypeScript

Para comenzar, debemos instalar TypeScript y su dependencia de tipos globales (@types/node). Asegúrate de que Node.js y npm estén instalados en tu sistema.

sh

Creación del archivo tsconfig.json

El archivo tsconfig.json es donde configuramos las opciones del compilador TypeScript. Puedes crear este archivo manualmente o generarlo con el siguiente comando:

sh

Este comando generará un archivo tsconfig.json en la raíz de tu proyecto con una configuración básica. Aquí hay un ejemplo de un archivo tsconfig.json inicial:

json

Parámetros importantes del tsconfig.json

• target: Especifica a qué versión de JavaScript debe compilar TypeScript. Por ejemplo, es6, es5.
• module: Define el sistema de módulos que se usará. El valor commonjs es adecuado para Node.js.
• strict: Activa el modo estricto de TypeScript, habilitando todas las verificaciones de seguridad de tipos.
• esModuleInterop: Permite una interoperabilidad más fácil para importar módulos CommonJS y ES6.
• skipLibCheck: Omite la verificación de tipos en los archivos de declaración.
• forceConsistentCasingInFileNames: Asegura un manejo de nombres de archivo consistente, útil especialmente en sistemas de archivos que no distinguen entre mayúsculas y minúsculas.

Integración con el Entorno de Desarrollo

Es útil configurar tu entorno de desarrollo para trabajar óptimamente con TypeScript. Si usas Visual Studio Code, te recomendamos instalar las siguientes extensiones:

• TypeScript Extension Pack: Incluye un conjunto de extensiones útiles para trabajar con TypeScript.
• ESLint: Para mantener un código limpio y consistente.

Configuración de ESLint para TypeScript

ESLint puede ayudar a mantener un código consistente y limpio. Para configurar ESLint junto con TypeScript, instala las siguientes dependencias:

sh

Añade o actualiza tu archivo .eslintrc.json para incluir las configuraciones necesarias para TypeScript:

json

Creación del Primer Archivo TypeScript (hello.ts)

Crea un archivo src/hello.ts y añade el siguiente código para asegurarte de que todo esté funcionando correctamente:

ts

Para compilar el archivo, ejecuta:

sh

El compilador generará un archivo hello.js en el mismo directorio si todo está configurado correctamente.

¡Felicidades! Has configurado TypeScript en tu proyecto existente. En el próximo módulo, veremos cómo empezar a migrar archivos JavaScript a TypeScript.