Tutorial de TypeScript

TypeScript es un superconjunto de JavaScript que admite el estándar ECMAScript 6 (Tutorial de ES6)。
TypeScript es un lenguaje de programación libre y de código abierto desarrollado por Microsoft; es un superconjunto que añade comprobación de tipos estática sobre JavaScript.
TypeScript está diseñado para el desarrollo de aplicaciones a gran escala. Se puede compilar a JavaScript puro, y el JavaScript compilado puede ejecutarse en cualquier navegador.
¿Por qué elegir TypeScript?
TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft; es un superconjunto de JavaScript.
TypeScript mejora enormemente la experiencia de desarrollo de JavaScript al añadir características como tipos estáticos opcionales, interfaces y enumeraciones.
Principales ventajas de TypeScript
- Comprobación de tipos estática:Detecta errores de tipo en tiempo de compilación, reduciendo los errores en tiempo de ejecución
- Potente soporte de IDE:Autocompletado de código inteligente, navegación y refactorización
- Mejor legibilidad del código:Los tipos son en sí mismos la mejor documentación
- Características modernas de JavaScript:Admite sintaxis ES6+, como funciones flecha, módulos, clases, etc.
- Migración progresiva:Se pueden migrar gradualmente proyectos JavaScript existentes a TypeScript
Cómo funciona TypeScript
TypeScript no puede ejecutarse directamente en el navegador; primero debe compilarse a JavaScript. Este proceso de compilación verifica los errores de tipo y convierte la sintaxis específica de TypeScript en JavaScript puro.
Diagrama SVG: proceso de compilación de TypeScriptEl compilador de TypeScript (tsc) realiza la comprobación de tipos durante el proceso de compilación; si encuentra errores de tipo, mostrará un error y detendrá la compilación. Tras una compilación exitosa, se genera código JavaScript puro que puede ejecutarse en cualquier navegador o entorno Node.js.
Características del lenguaje
TypeScript es una extensión de JavaScript mejorada con tipos. Sobre la base de mantener la compatibilidad de la sintaxis original, introduce un sistema de tipos más potente y capacidades de ingeniería.
Capacidades de mejora principales (exclusivas de TypeScript)
| Característica | Descripción |
|---|---|
| Anotaciones de tipos y comprobación en tiempo de compilación | Detecta errores de tipo en la fase de desarrollo, mejorando la fiabilidad del código |
| Inferencia de tipos | No es necesario declarar los tipos explícitamente; el compilador puede inferirlos automáticamente |
| Borrado de tipos | Elimina la información de tipos después de la compilación y genera JavaScript puro |
| Interfaz (Interface) | Se utiliza para definir la estructura de objetos y reforzar las restricciones del código |
| Enumeración (Enum) | Proporciona un conjunto de constantes con nombre, mejorando la legibilidad |
| Genéricos (Generics) | Admite la reutilización de tipos, aumentando la flexibilidad de funciones y clases |
| Mixin | Implementa el patrón de composición para herencia múltiple |
| Espacio de nombres (Namespace) | Organiza la estructura del código (solución antigua; ahora se usan más los módulos) |
| Tupla (Tuple) | Matriz de longitud fija con diferentes tipos |
| Asíncrono (Await) | Proporciona un control de flujo asíncrono más intuitivo |
Soporte de sintaxis de ES2015 (compatible con versiones anteriores)
TypeScript también admite y compila en sentido descendente las características principales de ECMAScript 2015:
| Característica | Descripción |
|---|---|
| Clase (Class) | Soporte de programación orientada a objetos |
| Módulo (Module) | Admite desarrollo modular (import/export) |
| Función flecha (=>) | Sintaxis de función más concisa, con enlace al ámbito léxico |
| Parámetros opcionales | Los parámetros de función pueden omitirse |
| Parámetros por defecto | Proporciona valores por defecto para los parámetros |
Diferencias entre JavaScript y TypeScript
TypeScript es un superconjunto de JavaScript que extiende la sintaxis de JavaScript, por lo que el código JavaScript existente puede funcionar con TypeScript sin necesidad de modificaciones. TypeScript proporciona comprobación de tipos estática en tiempo de compilación mediante anotaciones de tipos.
TypeScript puede manejar código JavaScript existente y solo compila el código TypeScript que contiene.
Primer ejemplo de TypeScript
En el siguiente ejemplo usamos TypeScript para mostrar la salida Hello World!:
Otras extensiones