Introducción a TypeScript

Typescript

Historia y Evolución de TypeScript

Origen de TypeScript:

TypeScript fue desarrollado por Microsoft y anunciado por primera vez en octubre de 2012. Su creador principal es Anders Hejlsberg, también conocido por ser el creador de C#.

La necesidad de TypeScript surgió debido a la creciente complejidad de las aplicaciones web y la necesidad de un lenguaje que pudiera manejar mejor el desarrollo a gran escala.

Evolución:

  • 2012: Versión 0.8 - Lanzamiento inicial de TypeScript.

  • 2014: Versión 1.0 - Primer lanzamiento estable, introduciendo características como módulos externos y compatibilidad con ECMAScript 6.

  • 2016: Versión 2.0 - Se introdujeron mejoras significativas como tipos no null y control de flujo basado en tipos.

  • 2018: Versión 3.0 - Añadió soporte para proyectos referenciados y mejoras en la experiencia de desarrollo.

  • 2020: Versión 4.0 - Introducción de nuevas características como variadic tuple types, label inference en destructuring y mejoras en la inferencia de tipos.

  • Actualidad: TypeScript sigue evolucionando con nuevas versiones que mejoran la robustez del lenguaje y la experiencia del desarrollador.

Diferencias entre JavaScript y TypeScript

Tipado Estático vs. Tipado Dinámico:

JavaScript: Lenguaje de tipado dinámico, donde los tipos se determinan en tiempo de ejecución.

TypeScript: Añade tipado estático, permitiendo definir tipos durante la escritura del código, lo que ayuda a detectar errores antes de la ejecución.

Gracias al tipado estático, TypeScript se ha convertido en una herramienta popular para el desarrollo de aplicaciones web ya que es más seguro y fácil de mantener en compraración con JavaScript.

Compatibilidad:

JavaScript: Todo código JavaScript válido es código TypeScript válido, lo que significa que TypeScript es un superconjunto de JavaScript.

TypeScript: Permite usar las últimas características de ECMAScript, y transpila el código a versiones anteriores de JavaScript para compatibilidad con navegadores más antiguos.

Tip

¿Qué es transpilación de código?

La transpilación es el proceso de convertir código de un lenguaje a otro. En el caso de TypeScript, el código, la herramienta más utilizada es el compilador de TypeScript (tsc), que convierte el código TypeScript a JavaScript. Sin embargo tambien se puede usar Babel para transpilar código TypeScript a JavaScript.

Características Adicionales:

Interfaces: TypeScript permite definir interfaces que ayudan a describir la forma de los objetos.

Enumeraciones (enums): TypeScript introduce enums, permitiendo definir conjuntos de constantes con nombres.

Decoradores: TypeScript soporta decoradores, que son una forma de modificar clases y métodos.

Instalación y Configuración del Entorno

En node.js se puede utilizar distintos gestores de paquetes, dentro de ellos tenemos npm, yarn y pnpm. En este caso se utilizará npm.

Tip

Un gestor de paquetes es una herramienta que permite instalar y gestionar dependencias de proyectos de forma sencilla.

En ocasiones es necesario tener más de una versión de node.js en el sistema, para ello se pueden utilizar herramientas como nvm, fnm, brew o chocolatey, inclusive Docker es una alternativa que se ha popularizado para tener distintas versiones de node.js, en este caso se utilizará fnm.

Ecosistema de JavaScript y TypeScript:

Es neceario conocer algunas herramientas y tecnologías que se utilizan en el ecosistema de JavaScript y TypeScript, entre ellas se encuentran:

Node.js: es un entorno de ejecución de JavaScript que permite ejecutar código JavaScript en el lado del servidor, existen otras alternativas que se han popularizado ultimamente como Deno, Bun, etc.

Deno: Es un entorno de ejecución de JavaScript y TypeScript que se ha vuelto popular por su seguridad, rendimiento y facilidad de uso.

Bun: Es un entorno de ejecución de JavaScript y TypeScript que se ha vuelto popular por su velocidad y facilidad de uso.

En este curso utilizaremos Node.js para el desarrollo de aplicaciones web con TypeScript

Npm: Es el gestor de paquetes de Node.js que se utiliza para instalar y gestionar dependencias de proyectos, existen otras alternativas como Yarn y pnpm.

Yarn: Es un gestor de paquetes de Node.js que se ha vuelto popular por su velocidad y facilidad de uso.

Pnpm: Es un gestor de paquetes de Node.js que se ha vuelto popular por su velocidad y facilidad de uso.

En este curso utilizaremos npm para instalar y gestionar dependencias de proyectos.

Instalación de Node.js y npm:

Para instalar Node.js y npm se puede utilizar el instalador oficial de Node.js, para ello se recomienda seguir los siguientes pasos:

  1. Descargar el instalador de Node.js desde la página oficial: Node.js

  2. Ejecutar el instalador y seguir las instrucciones.

  3. Verificar la instalación ejecutando los siguientes comandos en la terminal:

1node -v
2npm -v
1
Muestra la versión de Node.js instalada.
2
Muestra la versión de npm instalada.

Extra: nvm, fnm, brew, chocolate

En ocasiones será necesario probar proyectos con distintas versiones de Node.js, para ello se pueden utilizar herramientas como nvm, fnm, brew o chocolatey.

Tip

¿Qué es son nvm, fnm, brew o chocolatey?

Son herramientas que permiten instalar y gestionar distintas versiones de Node.js en el sistema.

  • nvm: Node Version Manager, es una herramienta que permite instalar y gestionar distintas versiones de Node.js en el sistema.

  • fnm: Fast Node Manager, es una herramienta que permite instalar y gestionar distintas versiones de Node.js de forma rápida.

  • brew: Homebrew, es un gestor de paquetes para macOS que permite instalar y gestionar aplicaciones y utilidades.

  • chocolatey: Es un gestor de paquetes para Windows que permite instalar y gestionar aplicaciones y utilidades.

Instalación de fnm:

Para instalar fnm se puede utilizar el instalador oficial de fnm, para ello se recomienda seguir los siguientes pasos:

  1. Descargar el instalador de fnm desde la página oficial: fnm

  2. Ejecutar el instalador y seguir las instrucciones.

  3. Verificar la instalación ejecutando los siguientes comandos en la terminal:

1fnm -v
1
Muestra la versión de fnm instalada.

Para poder cambiar la versión de Node.js se puede utilizar el siguiente comando en la terminal:

1fnm use <version>
1
Cambia la versión de Node.js a la versión especificada.

Ejemplo:

fnm use 14.17.0

El comando anterior cambiará la versión de Node.js a la versión 14.17.0.

Si queremos utilizar una versión más reciente de Node.js se puede utilizar el siguiente comando en la terminal:

fnm install latest

El comando anterior instalará la última versión de Node.js.

Si queremos utilizar una versión en particular como la 20.0.0 se puede utilizar el siguiente comando en la terminal:

fnm install 20.0.0

El comando anterior instalará la versión 20.0.0 de Node.js.

Si queremos cambiar de versión de Node.js en un proyecto en particular se puede utilizar el siguiente comando en la terminal:

1fnm use <version> --global false
1
Cambia la versión de Node.js a la versión especificada en el proyecto actual.

Ejemplo:

fnm use 20.0.0 --global false

El comando anterior cambiará la versión de Node.js a la versión 20.0.0 en el proyecto actual.

De esa forma se puede cambiar de versión de Node.js en un proyecto en particular.

Instalación de TypeScript:

Para instalar TypeScript se puede utilizar el gestor de paquetes npm, para ello se recomienda seguir los siguientes pasos:

  1. Instalar TypeScript de forma global ejecutando el siguiente comando en la terminal:
npm install -g typescript

El comando anterior instalará TypeScript de forma global en el sistema, lo que permitirá utilizar el compilador de TypeScript (tsc) desde cualquier directorio.

  1. Verificar la instalación ejecutando el siguiente comando en la terminal:
1tsc -v
1
Muestra la versión de TypeScript instalada.

Configuración de TypeScript:

Para configurar TypeScript en un proyecto se debe crear un archivo de configuración llamado tsconfig.json, que contiene las opciones de configuración del compilador de TypeScript.

Para crear un archivo de configuración de TypeScript se puede utilizar el siguiente comando en la terminal:

tsc --init

El comando anterior creará un archivo tsconfig.json con la configuración por defecto del compilador de TypeScript.

Compilación de TypeScript:

Para compilar un archivo TypeScript se puede utilizar el compilador de TypeScript (tsc), que convierte el código TypeScript a JavaScript.

Para compilar un archivo TypeScript se puede utilizar el siguiente comando en la terminal:

tsc archivo.ts

El comando anterior compilará el archivo archivo.ts y generará un archivo archivo.js con el código JavaScript resultante.

Ejemplo Práctico

En este ejemplo se creará un archivo TypeScript llamado saludo.ts que contiene una función que imprime un saludo en la consola.

Creación del Archivo TypeScript:

Para crear el archivo TypeScript se puede utilizar un editor de texto como Visual Studio Code, Sublime Text, Atom, etc. En este caso se utilizará Visual Studio Code.

  1. Crear un archivo saludo.ts con el siguiente contenido:
function saludar(nombre: string) {
    console.log(`¡Hola, ${nombre}!`);
}

saludar("Mundo");

El archivo saludo.ts contiene una función saludar que recibe un parámetro nombre de tipo string y lo imprime en la consola.

Compilación del Archivo TypeScript:

Para compilar el archivo TypeScript se puede utilizar el compilador de TypeScript (tsc), que convierte el código TypeScript a JavaScript.

  1. Compilar el archivo saludo.ts ejecutando el siguiente comando en la terminal:
tsc saludo.ts

El comando anterior compilará el archivo saludo.ts y generará un archivo saludo.js con el código JavaScript resultante.

Ejecución del Archivo JavaScript:

Para ejecutar el archivo JavaScript generado se puede utilizar un intérprete de JavaScript como Node.js.

  1. Ejecutar el archivo saludo.js ejecutando el siguiente comando en la terminal:
node saludo.js

El comando anterior ejecutará el archivo saludo.js y mostrará el saludo en la consola.

Conclusiones

  • TypeScript es un lenguaje de programación desarrollado por Microsoft que añade tipado estático a JavaScript.
  • TypeScript es un superconjunto de JavaScript, lo que significa que todo código JavaScript válido es código TypeScript válido.
  • TypeScript permite definir interfaces, enums y decoradores, entre otras características.
  • Para instalar TypeScript se puede utilizar el gestor de paquetes npm.
  • Para configurar TypeScript en un proyecto se debe crear un archivo tsconfig.json con las opciones de configuración del compilador de TypeScript.
  • Para compilar un archivo TypeScript se puede utilizar el compilador de TypeScript (tsc).
  • TypeScript es una herramienta poderosa para el desarrollo de aplicaciones web, ya que permite detectar errores en tiempo de compilación y mejorar la calidad del código.

Referencias