Introduccion a TypeScript

## Objetivos de Aprendizaje - Comprender la historia y limitaciones de JavaScript - Aprender por que se creo TypeScript - Configurar el entorno de desarrollo de TypeScript - Escribir y ejecutar tu primer programa en TypeScript - Comprender la configuracion de TypeScript ## Que es TypeScript? TypeScript es un lenguaje de programacion fuertemente tipado desarrollado por Microsoft. Es un superset de JavaScript que anade tipado estatico opcional, clases, interfaces y caracteristicas modernas de JavaScript. ```typescript // TypeScript anade anotaciones de tipo a JavaScript let message: string = "Hola, TypeScript!"; console.log(message); ``` ## Historia de JavaScript ### Evolucion | Anio | Version | Caracteristicas Clave | |------|---------|----------------------| | 1997 | JavaScript 1.0 | Primer lanzamiento en Netscape | | 2005 | AJAX | Aplicaciones web asincronas | | 2009 | Node.js | JavaScript en el servidor | | 2015 | ES6 | Clases, modulos, funciones flecha | | 2020 | ES2020 | Encadenamiento opcional, fusion nula | | 2022 | ES2022 | await de nivel superior, campos privados | ### Limitaciones de JavaScript - **Sin tipado estatico** - Errores solo se capturan en tiempo de ejecucion - **Sin comprobaciones en tiempo de compilacion** - Errores tipograficos descubiertos tarde - **Herramientas limitadas** - Menor soporte de IDE - **Desafios de escalabilidad** - Dificil mantener bases de codigo grandes ## Por que TypeScript? ### Beneficios - **Tipado Estatico** - Capturar errores durante el desarrollo - **Soporte de IDE** - Mejor autocompletado y refactorizacion - **Documentacion del Codigo** - Los tipos sirven como documentacion - **Refactorizacion Mas Segura** - El compilador captura cambios que rompen - **Caracteristicas Modernas** - Usar el ultimo JavaScript hoy ### Comparacion ```javascript // JavaScript - error encontrado en tiempo de ejecucion function add(a, b) { return a + b; } add(5, "5"); // "55" - error sutil ``` ```typescript // TypeScript - error capturado en tiempo de compilacion function add(a: number, b: number): number { return a + b; } add(5, "5"); // Error de compilacion! ``` ## Instalando TypeScript ### Prerrequisitos Instala Node.js desde ### Instalar TypeScript ```bash npm install -g typescript ``` ### Verificar Instalacion ```bash tsc --version ``` ### Usar TypeScript en Linea Prueba TypeScript sin instalacion en ## Tu Primer Programa ### Archivo: hello.ts ```typescript // Tu primer programa en TypeScript const message: string = "Hola, TypeScript!"; console.log(message); ``` ### Compilar y Ejecutar ```bash tsc hello.ts # Compila a hello.js node hello.js # Ejecuta la salida JavaScript ``` ### Salida ```text Hola, TypeScript! ``` ## Configuracion de TypeScript ### Inicializar Configuracion ```bash tsc --init ``` ### tsconfig.json ```json { "compilerOptions": { "target": "ES2020", "module": "commonjs", "strict": true, "outDir": "./dist", "rootDir": "./src", "esModuleInterop": true, "skipLibCheck": true }, "include": ["src/**/*"], "exclude": ["node_modules"] } ``` ### Opciones Clave | Opcion | Descripcion | |--------|-------------| | target | Version ECMAScript para la salida | | strict | Habilitar todas las comprobaciones strict | | outDir | Directorio de salida para archivos compilados | | rootDir | Directorio de origen | | module | Sistema de modulos a usar | ## Flujo de Trabajo de Desarrollo ### Compilar al Guardar (IDE) La mayoria de los IDEs pueden compilar TypeScript automaticamente cuando los archivos cambian. ### Modo Watch ```bash tsc --watch ``` ### Con ts-node Ejecuta TypeScript directamente sin compilacion: ```bash npx ts-node hello.ts ``` ## Configuracion del IDE ### VS Code Instala la extension "TypeScript Importer" para mejor autocompletado. ### WebStorm Soporte nativo de TypeScript integrado. ### Configuracion ```json { "typescript.preferences.importModuleSpecifier": "relative" } ``` ## TypeScript vs JavaScript ### JavaScript ```javascript function greet(name) { return "Hola, " + name; } greet("Mundo"); // Funciona greet(123); // Funciona, pero puede no ser lo esperado ``` ### TypeScript ```typescript function greet(name: string): string { return "Hola, " + name; } greet("Mundo"); // Funciona greet(123); // Error de compilacion: Argumento de tipo 'number' ``` ## Compilador de TypeScript ### Comandos Basicos ```bash tsc file.ts # Compilar archivo unico tsc --help # Mostrar todas las opciones tsc --noEmit # Verificar tipos sin salida tsc --pretty # Mensajes de error formateados ``` ### Modo Strict Habilitar todas las comprobaciones strict: ```json { "compilerOptions": { "strict": true } } ``` Esto habilita: - noImplicitAny - strictNullChecks - strictFunctionTypes - y mas ## Hello World Explicado ```typescript // Declaracion de tipo (opcional en algunos casos) const message: string = "Hola, TypeScript!"; // Log a consola console.log(message); ``` ### Componentes 1. **Anotacion de tipo** - `: string` declara el tipo 2. **const** - Enlace inmutable 3. **console.log** - Funcion de salida ## Resumen - TypeScript es un superset de JavaScript con tipado estatico - Anade comprobacion de errores en tiempo de compilacion - Mejora el soporte de IDE y la experiencia del desarrollador - Instalar con `npm install -g typescript` - Compilar con `tsc`, ejecutar con `node` - Usar `tsconfig.json` para configurar el compilador - Comenzar con `strict: true` para mejores resultados