Introducción

1. ¿Qué es TypeScript y por qué usarlo? #

TypeScript es un lenguaje de programación que extiende JavaScript añadiendo tipos estáticos. Fue desarrollado por Microsoft y se utiliza principalmente para escribir aplicaciones más grandes y escalables. Aunque el código TypeScript se compila a JavaScript para poder ejecutarse en cualquier navegador o entorno compatible con JavaScript, la principal ventaja es la detección temprana de errores gracias al tipado.

Beneficios de TypeScript:

• Tipado estático: Permite detectar errores durante la fase de desarrollo.
• Mejor autocompletado e inferencia de tipos: Proporciona sugerencias más precisas y detección de errores en los editores de código.
• Mantener y escalar proyectos: Ayuda a trabajar en proyectos grandes y en equipo, proporcionando un código más robusto y fácil de mantener.
• Compatibilidad con JavaScript: Puedes adoptar TypeScript gradualmente, ya que todo archivo JavaScript válido es también un archivo TypeScript válido.

2. Instalación y configuración del entorno #

Para empezar a trabajar con TypeScript, sigue los siguientes pasos:

1. Instalar Node.js: TypeScript se puede instalar usando npm, que viene incluido con Node.js. Para verificar si ya tienes Node.js instalado:

    
   1node -v
   2npm -v
   Salida de consola
   v15.10.0
   7.5.3

2. Instalar TypeScript: Ejecuta el siguiente comando para instalar TypeScript de forma global:

   1npm install -g typescript

   Verifica la instalación comprobando la versión de TypeScript:

   1tsc -v

3. Editor de código: Se recomienda usar Visual Studio Code o cualquier editor compatible con TypeScript para aprovechar características como autocompletado, análisis de errores y navegación por el código.

3. Configuración de tsconfig.json #

El archivo tsconfig.json es la configuración central de TypeScript en un proyecto. Este archivo define cómo el compilador tsc debe comportarse, qué archivos debe compilar, y varias otras opciones importantes.

Para generar un archivo tsconfig.json en tu proyecto:

1tsc --init

Este comando crea un archivo tsconfig.json con una configuración básica. A continuación, se muestran algunas de las configuraciones más importantes:

• target: Define a qué versión de JavaScript se compilará tu código. Ejemplo:

  1"target": "ES6"

• module: Especifica el sistema de módulos a usar. Ejemplo:

  1"module": "commonjs"

• strict: Habilita un conjunto de verificaciones estrictas para garantizar un código más seguro y robusto. Se recomienda tenerlo activado:

  1"strict": true

• outDir: Directorio donde se colocarán los archivos JavaScript compilados:

  1"outDir": "./dist"

4. TypeScript vs JavaScript: Principales diferencias #

Aunque TypeScript es un superconjunto de JavaScript, existen algunas diferencias clave:

1. Tipado estático: En JavaScript no es obligatorio declarar tipos. En TypeScript, puedes especificar los tipos de las variables, funciones y objetos, lo que permite detectar errores de tipado en tiempo de desarrollo.

   • JavaScript:

      
     1let nombre = "Juan";
     2console.log(nombre);
     Salida de consola
     Juan

   • TypeScript:

      
     1let nombre: string = "Juan";
     2console.log(nombre);
     Salida de consola
     Juan

2. Interfaces y Tipos: TypeScript permite definir contratos claros para objetos mediante interfaces y tipos, mejorando la legibilidad y mantenimiento del código.

   • TypeScript:

      
     1interface Persona {
     2  nombre: string;
     3  edad: number;
     4}
     5
     6const persona: Persona = { nombre: "Juan", edad: 25 };
     7console.log(persona);
     Salida de consola
     { nombre: 'Juan', edad: 25 }

3. Decoradores y clases: TypeScript extiende la funcionalidad de las clases de JavaScript, añadiendo soporte para características como los decoradores.

4. Soporte para módulos ES6 y más allá: Mientras que JavaScript admite módulos, TypeScript agrega una mejor estructura y soporte para sistemas de módulos más avanzados como CommonJS y ESModules.

5. Compilación: El código TypeScript necesita ser compilado a JavaScript antes de ejecutarse en el navegador o servidor. JavaScript no requiere una fase de compilación adicional.

5. Primer programa en TypeScript #

Ahora que tenemos el entorno configurado, es hora de escribir nuestro primer programa en TypeScript.

1. Crea un archivo llamado index.ts:

    
   1// index.ts
   2let saludo: string = "¡Hola, TypeScript!";
   3console.log(saludo);
   Salida de consola
   ¡Hola, TypeScript!

2. Compila el archivo TypeScript a JavaScript:

   1tsc index.ts

   Esto generará un archivo index.js que contiene el código JavaScript resultante:

    
   1// index.js
   2var saludo = "¡Hola, TypeScript!";
   3console.log(saludo);
   Salida de consola
   ¡Hola, TypeScript!

3. Ejecuta el archivo JavaScript:

   1node index.js

   El resultado será:

   ¡Hola, TypeScript!

Este primer programa muestra cómo usar tipado estático y cómo compilar TypeScript a JavaScript para ejecutarlo en Node.js o en un navegador.