TypeScript es más que JavaScript. Le agrega herramientas como el tipado estático. Este tipado ayuda a encontrar errores más rápido. Ayuda a que el código sea más fácil de mantener.1 Fue creado por Microsoft en 2012. Hoy en día, es vital para el desarrollo web. Lo usan Angular, React y Node.js, entre otros.2
Aspectos clave:
- TypeScript es un superconjunto de JavaScript que agrega más características al lenguaje.1
- JavaScript es un lenguaje con tipado dinámico, donde el tipo está asociado al valor y no a la variable.1
- TypeScript permite usar una sintaxis simple para tipar variables y genera el código JavaScript necesario durante la compilación.1
- Los lenguajes con tipado estático, como TypeScript, permiten detectar errores antes de la ejecución del código.1
- TypeScript convierte las funcionalidades nuevas de JavaScript en código compatible y permite usar características de otros lenguajes como interfaces o genéricos.1
¿Qué es TypeScript?
TypeScript es un lenguaje de programación que extiende a JavaScript. Añade la capacidad de definir tipos de variables y más.1 Es muy útil porque permite encontrar errores rápidamente al programar.1
TypeScript es un superconjunto de JavaScript
Microsoft creó TypeScript en 2012. Su meta era superar las limitaciones de JavaScript, tornándolo más escalable y fácil de mantener.1
Añade características adicionales a JavaScript
Introduce novedades como un sistema sólido de tipado, interfaces y genéricos.1 Estas mejoras son clave para proyectos grandes, haciendo que el código sea más fácil de mantener.1
Desarrollado por Microsoft en 2012
3Microsoft lanzó TypeScript en octubre de 2012. Desde entonces, ha ganado mucha popularidad en el mundo del desarrollo web.3
Beneficios de utilizar TypeScript
TypeScript es un superconjunto de JavaScript con tipado estático. Esto reduce errores y hace el código más claro.4 Tiene beneficios como detectar problemas en la compilación tempranamente. Ahorra tiempo de depuración. Mejora la autocompletación y las sugerencias de código. Facilita el uso de herramientas avanzadas como Visual Studio Code.4
Tipado estático
El tipado estático define los tipos de variables, parámetros y retorno de valores. Ayuda a encontrar errores antes de ejecutar el código.4 Mejora la solidez y confianza del software hecho.
Detección temprana de errores
TypeScript detecta errores en la compilación, ahorrando tiempo y esfuerzo en la depuración.4 Esto hace el desarrollo más rápido y confiable.
Mejora la escalabilidad y mantenibilidad
Los tipos en TypeScript mejoran la escalabilidad y mantenibilidad de proyectos grandes y complejos.4 Facilita el mantenimiento y escala del código, ideal para equipos grandes.4
| Beneficio | Descripción |
|---|---|
| Tipado estático | Permite definir los tipos de variables, parámetros y valores de retorno, lo que ayuda a detectar errores de forma temprana. |
| Detección temprana de errores | Encuentra errores durante la compilación, ahorrando tiempo y esfuerzo en la depuración. |
| Mejora de escalabilidad y mantenibilidad | El sistema de tipos de TypeScript facilita el mantenimiento y la escalabilidad de proyectos, especialmente en aplicaciones grandes y complejas. |
El rol de TypeScript
TypeScript es un lenguaje que convierte a JavaScript, por eso es necesario traducir su código antes de usarlo en un navegador o Node.js.1 Comparemos JavaScript con un lenguaje oral y TypeScript con uno escrito. JavaScript se entiende sin traducción inmediata, mientras TypeScript necesita esa traducción primero.1 TypeScript agrega un sistema de tipos al JavaScript, ayudando a encontrar errores antes y haciéndolo más limpio y fácil de mantener.1
En un aprendizaje en progreso, TypeScript es el mejor para aplicar nuevos patrones.5 Un ejemplo es el patrón de diseño Singleton que se estudió y puso a prueba. Este patrón hace que sólo haya una instancia de una clase.5 Sin embargo, algunos expertos señalan que Singleton no sigue un principio importante, el de tener una sola responsabilidad.5 Se vio cómo hacer con exactitud una sola instancia de un objeto y por qué puede no ser siempre la mejor opción.5
Para lograr una sola instancia, se creó un campo de clase estático. Este campo guarda el objeto único. También se hizo que el constructor fuera privado, además de definir un método para obtener esa única instancia.5 Como ejemplo práctico, se usó una clase de «base de datos» ficticia que manejaba listas de tareas.5 Para esta «base de datos», se agregaron métodos como `find`, `findAll`, `insert` y `delete`, todos necesarios para el manejo de datos.5
Además, para hacer el código más eficaz y seguro, se añadieron ayudas de programación.5 Por ejemplo, se introdujeron funciones para verificar que todas las propiedades de un objeto sean válidas.5 Uno de los puntos clave fue asegurarse de que desde fuera de la clase no se pueda instanciar, manteniendo una sola instancia global. Esto se logró gracias al uso de `static`.5
Se dieron ejemplos concretos del patrón Singleton.5 TypeScript se ha vuelto muy popular en el tiempo, especialmente en GitHub. Su crecimiento ha sido constante.6 Ahora, TypeScript está casi al mismo nivel de popularidad que JavaScript, según el movimiento de códigos que observamos.6
Microsoft contribuye mucho al TypeScript, siendo responsable de cerca de la mitad de las mejoras. Esto nos hace pensar en el impacto de una única empresa en este lenguaje ampliamente usado.6
Instalación de TypeScript
Para usar JavaScript tipado con TypeScript, necesitas Node.js primero.7 Después, puedes instalar TypeScript de dos formas. Puedes hacerlo globalmente o solo en tu proyecto.7
Instalación con npm
Para la instalación global, usa «npm install -g typescript».7 Para un proyecto en particular, escribe «npm install typescript –save-dev» en la carpeta de tu proyecto.1 Usar esta segunda opción es mejor. Evitará que tengas muchos paquetes globales.1
Instalación global vs instalación de proyecto
Si instalas TypeScript solo en tu proyecto, puedes checar la versión con `tsc -v`.7 Así, siempre sabrás qué versión estás usando en cada proyecto.7
Compilación de TypeScript a JavaScript
Los navegadores y Node.js no pueden leer TypeScript directamente. Entonces, debemos convertirlo a JavaScript con el compilador «tsc».8
Uso del compilador tsc
Para convertir un archivo TypeScript, usamos «tsc nombreArchivo.ts».8 Si queremos que los cambios se apliquen automáticamente, agregamos «–watch». Así, «tsc nombreArchivo.ts –watch» se encarga de recompilar después de cada cambio.8
Modo watch para recompilar automáticamente
Con el modo «watch» de TypeScript, los cambios se recompilan solos. Ya no es necesario recompilar a mano.8 Esto hace que trabajar sea más eficiente y ayuda en flujos de trabajo sin interrupciones.8
Introducción a TypeScript: JavaScript Tipado
TypeScript añade un sistema de tipo a JavaScript.1 Con TypeScript, puedes definir claramente los tipos de variables. Esto te ayuda a encontrar errores antes.1 Al compilar a JavaScript, funciona en muchos lugares.1
Microsoft creó TypeScript en 2012.9 Le añade nuevas opciones a JavaScript.9 Con su sistema de tipos, los proyectos son más fáciles de mantener. Además, el código se convierte en JavaScript que todos los navegadores y Node.js entienden.9
TypeScript destaca por su capacidad para descubrir errores antes de ejecutarse.1 A diferencia de JavaScript, aquí el tipo está clarito desde el principio.1
Ofrece también cosas avanzadas.1 Tiene interfaces, tipos a medida y más.1 Es clave para hoy en día en el desarrollo web. Angular, React y Node.js lo usan mucho.9
Así que, TypeScript hace JavaScript mejor, con un buen sistema de tipo.1 Muchos lo han adoptado.9 Es vital para hacer aplicaciones web grandes y sólidas.9
Artefactos clave de TypeScript
Los artefactos clave de TypeScript son elementales para trabajar con el lenguaje. Incluyen el compilador tsc,9 el archivo tsconfig.json para configurar,9 y los módulos junto con los archivos fuente y las definiciones de tipos. Además,9 la carpeta @types y los mapas de origen son importantes.9 Todo esto ayuda a compilar y depurar código escrito en TypeScript, esencialmente transformándolo a JavaScript de manera sencilla.
Compilador de TypeScript
El compilador de TypeScript, «tsc», transforma el código TypeScript en JavaScript.9 Necesario para correr programas escritos en TypeScript en otros ambientes. Así,9 permite que no se restrinja el uso de TypeScript.
Archivo tsconfig.json
El tsconfig.json define cómo opera el compilador de TypeScript.9 Sirve para configurar aspectos como la versión de ECMAScript, el módulo, y las reglas de minificación.9 Ayuda a personalizar el proceso de compilación.
Módulos de TypeScript
Los módulos de TypeScript hacen más fácil compartir y usar el código.9 Permiten importar y exportar partes del código en proyectos. Esto avanza la manera en que se maneja el desarrollo en TypeScript.
Archivos fuente (.ts)
Los archivos .ts son donde escribes el código en TypeScript.9 Aquí pones las definiciones y lógica que después se convierten a JavaScript.
Archivos de definición de tipos (.d.ts)
Los archivos .d.ts describen cómo se estructuran librerías externas a TypeScript.9 Así, TypeScript entiende mejor cómo usar estas librerías, aun sin ser TypeScript.
Carpeta de declaración de tipos (@types)
En la carpeta @types se guardan las definiciones para librerías de JavaScript.9 Esencial para trabajar con librerías de terceros sin tener que definir todo desde cero.
Mapas de origen (.map)
Los mapas .map son útiles para depurar el código.9 Permiten ver cómo se relaciona el código TypeScript original con el JavaScript compilado. Esto hace más fácil corregir errores.
Primeros pasos con TypeScript
Para empezar con TypeScript, necesitas instalar su compilador. Esto puede ser de forma global o local, dependiendo de tu preferencia.9 Microsoft creó TypeScript en 2012. Su compilador, llamado tsc, viene con TypeScript.9
Instalación de TypeScript
Instala TypeScript globalmente con «npm install -g TypeScript». Si prefieres una instalación más local, usa «npm install TypeScript –save-dev» en tu proyecto. Es mejor no llenar el sistema de dependencias globales.
Creación del archivo tsconfig.json
Es necesario crear el archivo tsconfig.json. Este archivo permite ajustar cómo funciona el compilador.9 No se puede compilar código TypeScript sin este archivo.9
Ejemplo básico de TypeScript
Con TypeScript, puedes definir una interfaz, luego una clase que la use, y un archivo principal para poner todo junto.7 En TypeScript, tienes un sistema de tipado estático y podrá usar cosas como genéricos y decoradores.7Usa el comando «tsc» para convertir tu código TypeScript a JavaScript. Después, podrás ejecutar tu programa en Node.js.7
9 TypeScript te permite escribir código que funcionará en navegadores web y en Node.js. Los archivos TypeScript terminan en «.ts».9
Funcionalidades principales de TypeScript
El tipado estático es clave en TypeScript. Ayuda a especificar los tipos de datos para prevenir errores desde el principio9. Las interfaces definen qué estructuras de datos deben seguir nuestras clases o tipos personalizados. Los tipos personalizados amplían las posibilidades de definición de datos. Por último, configurar propiedades en tsconfig.json adapta el compilador a nuestras necesidades9.
Tipado estático
En TypeScript, tipado estático te permite establecer con claridad los tipos de cada dato. Esto previene errores antes de que sucedan durante el desarrollo9. Por ende, añade fiabilidad, especialmente notable en proyectos grandes.
Interfaces
Interfaces definen reglas de cómo deben ser los datos. Esto asegura que todo el proyecto siga un mismo estándar, ayudando a que sea más fácil de mantener y crecer.
Tipos personalizados
Con tipos personalizados, en TypeScript, creamos clases de datos específicas. Esto organiza el código, lo hace más claro y reusable en el tiempo.
Configuración de propiedades
Con la configuración de propiedades en tsconfig.json, ajustamos el compilador a nuestro proyecto. Podemos definir cómo debe trabajar en detalles como el tipo de salida, manejo de módulos y más9.
Herramientas y frameworks que utilizan TypeScript
TypeScript es una opción común en el desarrollo web hoy en día. Es utilizado por herramientas y bibliotecas conocidas como Angular, React y Node.js. Se benefician de TypeScript por su tipado claro y la prevención de errores. Esto ayuda a hacer proyectos de mejor calidad y más fáciles de mantener.10
Un estudio de Airbnb mostró que redujeron un 38% los errores con TypeScript.11 Además, npm Trends indica que TypeScript está siendo más usado. Sale en el Top 10 de los lenguajes más usados, según GitHub. Esto demuestra su importancia en el mundo del software.11
Los frameworks que emplean TypeScript suelen tener buenas funciones para trabajar con él. Ofrecen herramientas que hacen más fácil compilar y correr el código.10 Encuestas en StackOverflow hablan sobre lo que piensan los desarrolladores de TypeScript.11
Enlaces de origen
- https://zeppelin.dev/blog/introduccion-teorica-a-typescript
- https://aulasoftwarelibre.github.io/taller-javascript-typescript/introduccion/
- https://kinsta.com/es/base-de-conocimiento/que-es-typescript/
- https://nelkodev.com/blog/cuando-usar-typescript-sobre-javascript-ventajas-y-desventajas
- https://dev.to/leobar37/singlenton-en-typescript-53f1
- https://portal.gitnation.org/contents/que-es-tc39-type-annotations-tambien-conocido-como-la-propuesta-de-tipos-como-comentarios
- https://softwarecrafters.io/typescript/typescript-tutorial-javascript-introduccion
- https://desarrolloweb.com/articulos/introduccion-a-typescript.html
- https://medium.com/@diego.coder/introducción-a-typescript-7add491e256
- https://atareao.es/typescript/introduccion-a-typescript-desde-cero/
- https://medium.com/@alejodev95/introducción-a-typescript-9740a71aaaee
