TYPESCRIPT: QUÉ ES, VENTAJAS Y CONCEPTOS BÁSICOS
TypeScript es un superconjunto de JavaScript que añade tipado estático y características avanzadas para mejorar el desarrollo de aplicaciones web. Fue creado por Microsoft, se compila a JavaScript puro, por lo que puede ejecutarse en cualquier entorno compatible con JavaScript (navegadores, NodeJS, etc.). Es especialmente útil en proyectos grandes o con frameworks como Vue, Angular o React, ya que reduce errores y mejora la mantenibilidad del código.Características clave de TypeScript
- Tipado estático: Define tipos para variables, parámetros y retornos (por ejemplo, string, number, boolean), lo que detecta errores en tiempo de desarrollo.
let nombre: string = "Ana"; // Correcto
nombre = 42; // Error: no se puede asignar un número a un string
- Soporte para ES6+: Incluye todas las características de JavaScript moderno y agrega herramientas como interfaces, enums y decoradores.
- Mejor tooling: Ofrece autocompletado, detección de errores y refactorización en editores.
- Compatibilidad con Vue: En Vue 3, TypeScript está bien integrado, especialmente con la sintaxis script setup y la Composition AP
¿Por qué usar TypeScript con Vue?
- Menos errores: Detecta problemas (como pasar un tipo incorrecto) antes de ejecutar el código.
- Mejor documentación: Los tipos actúan como documentación, facilitando el mantenimiento.
- Escalabilidad: Ideal para proyectos grandes, como los que usan Vue en aplicaciones empresariales.
- Soporte nativo: Vue 3 está diseñado para trabajar bien con TypeScript, usando herramientas como Volar en VS Code.
Instalar TypeScript
Instala NodeJS
TypeScript se instala con npm, que viene incluido con NodeJS. Descargar la versión LTS de NodeJS en https://nodejs.org e instalarlo normalmente. Verificar que esté instalado con el comando:
node -v
npm -v
Instalar TypeScript
Opción recomendada (global):
npm install -g typescript
Opción local (dentro de un proyecto):
npm install --save-dev typescript
Verificar la instalación
tsc --version
Debería mostrar la versión de TypeScript, por ejemplo Version 5.x.x.
Uso rápido
Una vez instalado, se puede compilar un archivo ".ts" así:
tsc archivo.ts
¿Cómo se usa?
- Escribir código en archivos ".ts" o ".vue" con "<script lang='ts'>".
- Compilar a JavaScript con el compilador "tsc" o herramientas como Vite.
- Ejecutar el JavaScript resultante en un navegador o NodeJS.
Ejemplos de TypeScript
let nombre: string = "Ana"; // Correcto
nombre = 42; // Error: no se puede asignar un número a un string
- Menos errores: Detecta problemas (como pasar un tipo incorrecto) antes de ejecutar el código.
- Mejor documentación: Los tipos actúan como documentación, facilitando el mantenimiento.
- Escalabilidad: Ideal para proyectos grandes, como los que usan Vue en aplicaciones empresariales.
- Soporte nativo: Vue 3 está diseñado para trabajar bien con TypeScript, usando herramientas como Volar en VS Code.
Instalar TypeScript
Instala NodeJS
TypeScript se instala con npm, que viene incluido con NodeJS. Descargar la versión LTS de NodeJS en https://nodejs.org e instalarlo normalmente. Verificar que esté instalado con el comando:node -v
npm -v
Instalar TypeScript
Opción recomendada (global):npm install -g typescript
npm install --save-dev typescript
Verificar la instalación
tsc --version
Uso rápido
Una vez instalado, se puede compilar un archivo ".ts" así:tsc archivo.ts