¿Qué es TypeScript?

TypeScript es un lenguaje de programación desarrollado y mantenido por Microsoft. Es un superconjunto de JavaScript que agrega tipos estáticos opcionales y otras características avanzadas. Esto significa que cualquier código JavaScript válido también es código TypeScript válido. TypeScript se compila a JavaScript, lo que permite que el código TypeScript se ejecute en cualquier entorno que soporte JavaScript, como navegadores web y servidores Node.js.

Ventajas de TypeScript

  1. Tipos Estáticos: Permite definir tipos para variables, funciones, y objetos, lo que ayuda a detectar errores en tiempo de desarrollo.
  2. Mejor Autocompletado y Refactorización: Los editores de código pueden proporcionar mejores sugerencias y herramientas de refactorización gracias a la información de tipos.
  3. Compatibilidad con JavaScript: Todo el código JavaScript es válido en TypeScript, lo que facilita la adopción gradual.
  4. Características de ES6/ES7 y Más Allá: TypeScript soporta características modernas de JavaScript y algunas adicionales, como decoradores y tipos genéricos.
  5. Soporte para Módulos: TypeScript tiene un sistema de módulos robusto que facilita la organización del código.

Instalación de TypeScript

Para comenzar a usar TypeScript, primero necesitas instalarlo. Puedes hacerlo globalmente en tu sistema usando npm (Node Package Manager).

npm install -g typescript

Para verificar que TypeScript se ha instalado correctamente, puedes ejecutar el siguiente comando:

tsc --version

Compilación de TypeScript a JavaScript

TypeScript se compila a JavaScript utilizando el comando tsc. Aquí hay un ejemplo simple de cómo compilar un archivo TypeScript:

  1. Crea un archivo llamado hello.ts con el siguiente contenido:

    let message: string = "Hello, TypeScript!";
    console.log(message);
    
  2. Compila el archivo TypeScript a JavaScript:

    tsc hello.ts
    

    Esto generará un archivo hello.js con el siguiente contenido:

    var message = "Hello, TypeScript!";
    console.log(message);
    
  3. Ejecuta el archivo JavaScript usando Node.js:

    node hello.js
    

    Deberías ver la salida Hello, TypeScript! en la consola.

Configuración del Proyecto TypeScript

Para proyectos más grandes, es útil tener un archivo de configuración tsconfig.json que especifique las opciones de compilación. Puedes crear este archivo manualmente o generarlo usando el comando:

tsc --init

Un archivo tsconfig.json básico podría verse así:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Explicación de las Opciones

  • target: Especifica la versión de JavaScript a la que se compilará el código TypeScript. En este caso, ES5.
  • module: Define el sistema de módulos a utilizar. commonjs es comúnmente usado en Node.js.
  • strict: Habilita todas las verificaciones estrictas de tipo.
  • esModuleInterop: Habilita la interoperabilidad con módulos ES.
  • skipLibCheck: Omite la verificación de tipos en archivos de declaración.
  • forceConsistentCasingInFileNames: Asegura que los nombres de archivo sean consistentes en cuanto a mayúsculas y minúsculas.

Ejercicio Práctico

Ejercicio 1: Compilación Básica

  1. Crea un archivo greeting.ts con el siguiente contenido:

    function greet(name: string): string {
        return `Hello, ${name}!`;
    }
    
    let user = "World";
    console.log(greet(user));
    
  2. Compila el archivo usando tsc y ejecuta el archivo JavaScript resultante con Node.js.

Solución

  1. Crea el archivo greeting.ts:

    function greet(name: string): string {
        return `Hello, ${name}!`;
    }
    
    let user = "World";
    console.log(greet(user));
    
  2. Compila el archivo:

    tsc greeting.ts
    
  3. Ejecuta el archivo JavaScript:

    node greeting.js
    

    Deberías ver la salida Hello, World! en la consola.

Conclusión

En esta lección, hemos cubierto los conceptos básicos de TypeScript, incluyendo su instalación, compilación y configuración. TypeScript ofrece muchas ventajas sobre JavaScript puro, especialmente en proyectos grandes y complejos. En la próxima lección, exploraremos las variables y tipos de datos en TypeScript, lo que nos permitirá aprovechar al máximo las capacidades de tipado estático del lenguaje.

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

© Copyright 2024. Todos los derechos reservados