Saltar al contenido

TypeScript

Typescript

TypeScript es un lenguaje de programación libre y de código abierto desarrollado por Microsoft que se basa en JavaScript, pero agrega características adicionales de programación orientada a objetos y tipos estáticos opcionales. TypeScript se puede compilar en JavaScript para su uso en cualquier navegador web o plataforma. Además, TypeScript es compatible con cualquier librería o framework que se haya desarrollado para JavaScript, lo que lo hace muy versátil. Una de las principales ventajas de TypeScript es que ayuda a prevenir errores comunes en tiempo de compilación gracias a su sistema de tipos estáticos y su capacidad para detectar posibles problemas de código antes de ejecutarlo.

Índice

Historia

TypeScript es un lenguaje de programación libre y de código abierto desarrollado y mantenido por Microsoft. Fue lanzado en octubre de 2012 y su objetivo principal era solucionar algunas limitaciones de JavaScript y proporcionar una opción más sólida para el desarrollo de aplicaciones a gran escala.

El equipo de desarrollo de TypeScript estaba liderado por Anders Hejlsberg, quien también fue responsable de la creación de otros lenguajes de programación populares como C# y Delphi. Hejlsberg y su equipo comenzaron a trabajar en TypeScript en 2010, y se basaron en los principios de OOP y del patrón de diseño de extensibilidad para crear el lenguaje.

La idea principal detrás de TypeScript era agregar características que faltan en JavaScript, como el tipado estático y una sintaxis más estructurada, mientras se mantiene la compatibilidad con JavaScript y se conservan las ventajas de este último, como la facilidad de uso y la interoperabilidad. TypeScript fue diseñado para ser compilado a JavaScript y se integró directamente con el sistema de compilación de JavaScript más popular, Node.js.

TypeScript se ha convertido en un lenguaje popular para el desarrollo de aplicaciones web y móviles en los últimos años y ha sido adoptado por grandes empresas como Airbnb, Asana, Slack y Microsoft, entre otros. Con el tiempo, TypeScript ha evolucionado para incluir características más avanzadas como la inferencia de tipos, la generación de código, la encapsulación de módulos y la manipulación avanzada de tipos de datos, lo que lo convierte en un lenguaje potente y versátil para los desarrolladores.

Ventajas de utilizar TypeScript

TypeScript ofrece una serie de ventajas que lo convierten en una opción muy atractiva para el desarrollo de aplicaciones web y móviles. Algunas de las ventajas más importantes de TypeScript son:

  • Tipado estático: Una de las principales ventajas de TypeScript es que permite el uso de tipado estático, lo que significa que el compilador de TypeScript puede detectar y corregir errores de tipo antes de que el código se ejecute. Esto hace que sea más fácil escribir código robusto y menos propenso a errores.
  • Mayor productividad: Al contar con tipado estático, TypeScript permite a los desarrolladores trabajar con mayor seguridad y confianza en su código, lo que les permite ser más productivos. Además, TypeScript incluye características que permiten a los desarrolladores trabajar de manera más eficiente, como la inferencia de tipos, la documentación integrada y la compatibilidad con herramientas de desarrollo modernas.
  • Interoperabilidad con JavaScript: TypeScript se basa en JavaScript, por lo que es fácil de aprender y usar para aquellos que ya tienen experiencia en JavaScript. Además, TypeScript es compatible con las bibliotecas y frameworks de JavaScript existentes, lo que permite a los desarrolladores utilizar estas herramientas en proyectos de TypeScript.
  • Evolución constante: TypeScript es un proyecto de código abierto respaldado por Microsoft, lo que significa que se actualiza regularmente con nuevas características y mejoras. Esto asegura que TypeScript se mantenga al día con las tendencias y necesidades del desarrollo web y móvil.
  • Facilidad de mantenimiento: Al contar con un sistema de tipado estático, TypeScript hace que sea más fácil mantener el código a medida que este evoluciona con el tiempo. Además, TypeScript incluye características como los decoradores que permiten a los desarrolladores escribir código más legible y mantenible.

Sintaxis de TypeScript

La sintaxis de TypeScript es muy similar a la de JavaScript, ya que TypeScript es un superset de JavaScript. Esto significa que todo lo que se puede hacer en JavaScript se puede hacer en TypeScript, con la adición de algunas características adicionales que se describen a continuación:

  • Tipos de datos: una de las principales características de TypeScript es la capacidad de definir tipos de datos para variables, funciones y otros elementos del programa. Esto ayuda a prevenir errores comunes de programación, ya que el compilador de TypeScript puede detectar problemas de tipos antes de que se ejecuten en tiempo de ejecución.
  • Interfaces: las interfaces son una forma de definir la estructura de un objeto, lo que ayuda a prevenir errores al garantizar que los objetos cumplan con una estructura específica.
  • Clases: TypeScript admite la programación orientada a objetos mediante la definición de clases, que pueden contener propiedades, métodos y constructores.
  • Decoradores: los decoradores son una característica que permite la adición de metadatos a clases, propiedades y métodos en tiempo de compilación.
  • Genéricos: los genéricos permiten la definición de funciones y clases que pueden trabajar con diferentes tipos de datos sin tener que reescribir el código.
  • Módulos: los módulos son una forma de organizar el código en archivos separados para facilitar su mantenimiento y reutilización.

Tipos de datos en TypeScript

En TypeScript, los tipos de datos se refieren a los diferentes tipos de valores que se pueden utilizar en una variable, constante, parámetro de función o cualquier otra entidad de programación. TypeScript incluye varios tipos de datos básicos, así como tipos de datos más complejos y personalizados. A continuación, se describen algunos de los tipos de datos más comunes en TypeScript:

  • Tipo «number«: representa un número, ya sea entero o decimal.
  • Tipo «string«: representa una cadena de texto.
  • Tipo «boolean«: representa un valor verdadero o falso.
  • Tipo «any«: representa cualquier tipo de valor, lo que significa que no se comprueba su tipo.
  • Tipo «void«: representa la ausencia de un valor. Se utiliza principalmente como tipo de retorno para funciones que no devuelven nada.
  • Tipo «null» y tipo «undefined»: representan valores nulos o indefinidos, respectivamente.

Además de estos tipos básicos, TypeScript también tiene tipos de datos más avanzados, como tuplas, matrices y objetos. Las tuplas son una colección de valores con tipos específicos, mientras que las matrices son colecciones de valores del mismo tipo. Los objetos en TypeScript son estructuras de datos complejas que contienen propiedades con valores asociados.

Los tipos de datos también se pueden personalizar en TypeScript. Por ejemplo, se pueden definir interfaces personalizadas que describen la forma de los objetos que se utilizan en una aplicación. También se pueden crear tipos de datos de unión que permiten definir una variable que puede contener uno de varios tipos diferentes de valores.

Declaración de variables y constantes

En TypeScript, al igual que en JavaScript, se utilizan las palabras clave let y const para declarar variables y constantes respectivamente.

La diferencia principal entre let y const es que let se utiliza para declarar variables que pueden ser reasignadas, mientras que const se utiliza para declarar constantes cuyo valor no puede ser modificado una vez asignado.

Por ejemplo, para declarar una variable x con un valor inicial de 10, se puede escribir:

let x: number = 10;

En este caso, se especifica que la variable x es de tipo number.

Para declarar una constante y con un valor inicial de 5, se puede escribir:

const y: number = 5;

En este caso, también se especifica que la constante y es de tipo number.

Es importante notar que TypeScript es un lenguaje de tipado estático, lo que significa que se deben especificar los tipos de datos para las variables y constantes al momento de su declaración. Esto ayuda a prevenir errores en tiempo de ejecución y a mejorar la calidad del código.

Inferencia de tipos en TypeScript

La inferencia de tipos es una función clave en TypeScript que permite a los programadores omitir explícitamente la declaración del tipo de una variable o constante en el código. En lugar de declarar el tipo, TypeScript puede inferir el tipo automáticamente basado en el valor asignado a la variable o constante.

Por ejemplo, en lugar de declarar una variable como:

let x: number = 10;

Es posible utilizar la inferencia de tipos de TypeScript y declararla simplemente como:

let x = 10;

En este caso, TypeScript infiere automáticamente que x es una variable de tipo number.

La inferencia de tipos puede ahorrar tiempo al escribir código y hacer que el código sea más legible al reducir la cantidad de código redundante. Además, la inferencia de tipos también puede ayudar a prevenir errores de tipado al obligar al compilador a comprobar si el tipo inferido es compatible con otros tipos utilizados en el código.

Alias de tipos

En TypeScript, el alias de tipos se utiliza para crear un nuevo nombre para un tipo existente. Esto puede ser útil para hacer que el código sea más legible y fácil de entender, ya que permite definir un tipo personalizado para un concepto específico en lugar de tener que repetir la definición completa del tipo en varios lugares del código.

Para crear un alias de tipo en TypeScript, se utiliza la palabra clave type, seguida del nuevo nombre que se desea asignar al tipo existente y la definición del tipo que se está aliasando. Por ejemplo, se puede crear un alias de tipo para el tipo number de la siguiente manera:

type MiNumero = number;

Una vez que se ha creado un alias de tipo, se puede utilizar en cualquier lugar donde se hubiera utilizado el tipo original. Por ejemplo, se puede utilizar el alias MiNumero en lugar de number al definir una variable:

let edad: MiNumero = 30;

El uso de alias de tipos puede hacer que el código sea más legible y fácil de entender, especialmente en casos donde se utilizan tipos complejos o anidados.

Funciones y métodos

En TypeScript, una función es un bloque de código que realiza una tarea específica. Las funciones pueden tomar parámetros y devolver valores. Una función se define utilizando la palabra clave «function», seguida del nombre de la función y, opcionalmente, una lista de parámetros encerrados entre paréntesis. La sintaxis básica de una función en TypeScript es la siguiente:

function nombreFuncion(parametro1: tipo, parametro2: tipo): tipoRetorno {
  // cuerpo de la función
  return valorRetorno;
}

En esta sintaxis, «nombreFuncion» es el nombre de la función, «parametro1» y «parametro2» son los nombres de los parámetros que la función toma, «tipo» es el tipo de dato que cada parámetro debe ser, «tipoRetorno» es el tipo de dato que la función devolverá, y «valorRetorno» es el valor que la función devuelve.

Además de las funciones normales, TypeScript también admite métodos. Un método es una función que está asociada a un objeto o una clase y que puede acceder a los datos y propiedades de ese objeto o clase. Los métodos se definen dentro del cuerpo de una clase utilizando la misma sintaxis que las funciones. Por ejemplo:

class Persona {
  nombre: string;
  apellido: string;
  
  constructor(nombre: string, apellido: string) {
    this.nombre = nombre;
    this.apellido = apellido;
  }
  
  nombreCompleto(): string {
    return this.nombre + " " + this.apellido;
  }
}

En este ejemplo, «Persona» es una clase que tiene dos propiedades, «nombre» y «apellido», y un método llamado «nombreCompleto». El método «nombreCompleto» concatena el nombre y el apellido de la persona y devuelve el resultado como una cadena.

Los métodos también pueden ser estáticos, lo que significa que no requieren una instancia de la clase para ser invocados. Los métodos estáticos se definen utilizando la palabra clave «static» antes del nombre del método. Por ejemplo:

class Utilidades {
  static sumar(a: number, b: number): number {
    return a + b;
  }
}

En este ejemplo, «Utilidades» es una clase que tiene un método estático llamado «sumar», que toma dos parámetros numéricos y devuelve su suma.

En TypeScript, también se pueden definir funciones anónimas y funciones de flecha (arrow functions), que son formas más concisas de definir funciones. Por ejemplo:

// Función anónima
const saludar = function(nombre: string): void {
  console.log("Hola, " + nombre + "!");
}
// Función de flecha
const sumar = (a: number, b: number): number => a + b;

Programación orientada a objetos en TypeScript

TypeScript es un lenguaje de programación orientado a objetos que se construye sobre JavaScript, lo que significa que hereda todas las características y conceptos de programación orientada a objetos de JavaScript. Al igual que JavaScript, TypeScript también es un lenguaje de tipado débil que admite la creación de clases, interfaces, objetos y módulos.

A continuación, se detallan algunas de las características de programación orientada a objetos que ofrece TypeScript:

  • Clases: las clases son la principal unidad de organización en la programación orientada a objetos. En TypeScript, las clases se definen mediante la palabra clave «class» seguida del nombre de la clase y el cuerpo de la clase entre llaves. Las clases pueden tener propiedades y métodos, y se pueden heredar y extender a través de la herencia de clases.
  • Herencia: la herencia es un concepto importante en la programación orientada a objetos que permite la creación de nuevas clases a partir de clases existentes. TypeScript admite la herencia de clases mediante la palabra clave «extends».
  • Encapsulación: la encapsulación es la capacidad de ocultar los detalles internos de una clase y exponer solo lo que se necesita para interactuar con ella. En TypeScript, la encapsulación se logra mediante la definición de propiedades y métodos privados y protegidos.
  • Polimorfismo: el polimorfismo es la capacidad de una clase para tener múltiples formas. TypeScript admite el polimorfismo mediante la definición de interfaces y la implementación de la sobrecarga de métodos.
  • Interfaces: las interfaces son contratos que especifican las propiedades y los métodos que deben tener los objetos que los implementan. En TypeScript, las interfaces se definen mediante la palabra clave «interface» seguida del nombre de la interfaz y su definición.
  • Genéricos: los genéricos son un mecanismo que permite la reutilización de código mediante la definición de tipos que se pueden utilizar en diferentes situaciones. TypeScript admite los genéricos para clases, interfaces y funciones.

Programación asíncrona en TypeScript

La programación asíncrona en TypeScript es un enfoque de programación que permite que las operaciones se ejecuten en segundo plano sin bloquear la ejecución de otras operaciones. En lugar de esperar a que una operación se complete antes de continuar con la siguiente, se pueden iniciar múltiples operaciones en paralelo y manejarlas a medida que se completan.

TypeScript utiliza funciones asíncronas y promesas para realizar operaciones asíncronas. Una función asíncrona es una función que devuelve una promesa. Dentro de una función asíncrona, se pueden realizar múltiples operaciones asíncronas utilizando la palabra clave await, lo que permite que la función espere a que se complete una operación antes de continuar con la siguiente.

Por ejemplo, la siguiente función asíncrona realiza una solicitud HTTP y devuelve los datos de respuesta:

async function getData(url: string): Promise<any> {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

En este ejemplo, la función fetch realiza una solicitud HTTP y devuelve una promesa que se resuelve con la respuesta de la solicitud. La palabra clave await se usa para esperar a que la promesa se resuelva antes de continuar con la siguiente línea de código.

Además de las funciones asíncronas, TypeScript también proporciona las promesas, que son objetos que representan el resultado futuro de una operación asíncrona. Las promesas tienen tres estados posibles: pendiente, resuelta o rechazada. Cuando se resuelve una promesa, se llama a la función then con el valor resuelto como argumento. Cuando se rechaza una promesa, se llama a la función catch con el motivo del rechazo como argumento.

Por ejemplo, la siguiente función devuelve una promesa que se resuelve con los datos de respuesta de una solicitud HTTP:

function getData(url: string): Promise<any> {
  return fetch(url)
    .then(response => response.json())
}

En este ejemplo, la función fetch devuelve una promesa que se resuelve con la respuesta de la solicitud. La función then se usa para procesar los datos de respuesta y devolverlos como una nueva promesa. Si se produce un error en la solicitud HTTP, se rechaza la promesa y se llama a la función catch con el motivo del rechazo.

Módulos y namespaces en TypeScript

En TypeScript, los módulos son una forma de organizar y encapsular el código. Los módulos permiten dividir el código en piezas más pequeñas y separadas, lo que facilita el mantenimiento y la reutilización del código. Además, los módulos permiten definir espacios de nombres (namespaces) para evitar colisiones de nombres entre diferentes partes del código.

Los módulos en TypeScript se pueden definir utilizando la palabra clave module o utilizando la sintaxis de módulos de ECMAScript 6 (ES6). Por ejemplo, para definir un módulo llamado myModule que exporta una función myFunction, se podría escribir lo siguiente:

module myModule {
  export function myFunction() {
    // Código de la función
  }
}

También se puede utilizar la sintaxis de módulos de ES6 para definir un módulo:

export module myModule {
  export function myFunction() {
    // Código de la función
  }
}

Para utilizar un módulo en TypeScript, es necesario importarlo utilizando la palabra clave import. Por ejemplo, para importar el módulo myModule y utilizar la función myFunction, se podría escribir lo siguiente:

import { myModule } from './myModule';
myModule.myFunction();

Además de los módulos, TypeScript también permite definir espacios de nombres (namespaces) utilizando la palabra clave namespace. Los espacios de nombres permiten agrupar clases, interfaces, funciones y otros objetos en un solo lugar para evitar colisiones de nombres. Por ejemplo, para definir un espacio de nombres llamado myNamespace que contiene una clase MyClass y una función myFunction, se podría escribir lo siguiente:

namespace myNamespace {
  export class MyClass {
    // Código de la clase
  }
  
  export function myFunction() {
    // Código de la función
  }
}

Para utilizar los objetos definidos en un espacio de nombres, es necesario acceder a ellos utilizando la notación de punto. Por ejemplo, para utilizar la clase MyClass y la función myFunction, se podría escribir lo siguiente:

let myObject = new myNamespace.MyClass();
myNamespace.myFunction();

Herramientas para TypeScript

  • TypeScript Compiler (tsc): es la herramienta principal que se usa para compilar archivos TypeScript en JavaScript. Viene incluido con la instalación de TypeScript y se ejecuta a través de la línea de comandos.
  • TypeScript Playground: es una herramienta en línea que permite experimentar con el código TypeScript, ver la salida JavaScript correspondiente y probar características de TypeScript sin necesidad de configurar un entorno de desarrollo local.
  • Visual Studio Code: es un popular editor de código gratuito que tiene soporte integrado para TypeScript. Ofrece muchas características útiles como sugerencias de autocompletado, navegación de código, depuración y más.
  • Webpack: es una herramienta de empaquetamiento de módulos que es compatible con TypeScript. Permite a los desarrolladores estructurar su código en módulos y empacarlos en un solo archivo JavaScript.
  • Node.js: es un entorno de tiempo de ejecución de JavaScript que se utiliza para ejecutar código JavaScript fuera de un navegador web. Es compatible con TypeScript y se puede usar para crear aplicaciones de servidor en TypeScript.
  • Angular: es un popular framework de desarrollo web de TypeScript creado por Google. Ofrece muchas características útiles para la construcción de aplicaciones web, como enrutamiento, manejo de formularios, inyección de dependencias, pruebas y más.
  • React: es una biblioteca popular para la construcción de interfaces de usuario. Tiene soporte integrado para TypeScript y se puede usar para construir aplicaciones web de una sola página con TypeScript.

Mejores prácticas al trabajar con en TypeScript

  • Usar tipos de datos: TypeScript se basa en la tipificación estática, lo que significa que se deben definir los tipos de datos para todas las variables y parámetros de función. Esto ayuda a prevenir errores comunes en tiempo de ejecución y facilita el mantenimiento del código.
  • Usar interfaces: Las interfaces permiten definir la forma de un objeto y son útiles para definir contratos entre diferentes partes del código. Usar interfaces puede mejorar la claridad y la capacidad de mantenimiento del código.
  • Usar clases: Las clases son una parte fundamental de la programación orientada a objetos en TypeScript. Permiten definir objetos con comportamientos y propiedades definidas, lo que facilita la reutilización del código y la organización del mismo.
  • Usar módulos: Los módulos permiten organizar el código en diferentes archivos y reutilizarlo en diferentes partes de una aplicación. Los módulos también ayudan a prevenir conflictos de nombres y permiten una mejor escalabilidad.
  • Usar herramientas de construcción: TypeScript puede compilar a JavaScript, pero se requiere una herramienta de construcción para automatizar el proceso. Algunas de las herramientas de construcción más populares son Webpack, Rollup y Parcel.
  • Mantener el código limpio: Es importante seguir las buenas prácticas de codificación, como el uso de nombres de variables descriptivos y la separación de las responsabilidades en diferentes funciones o clases. Esto ayuda a que el código sea más legible y fácil de mantener.
  • Pruebas unitarias: Las pruebas unitarias son una parte importante del desarrollo de software. Permiten detectar errores en el código de forma temprana y garantizar que el código se comporte como se espera. TypeScript se integra bien con frameworks de pruebas como Jest o Mocha.

Recursos para seguir aprendiendo TypeScript

¿Quieres profundizar en tus conocimientos de TypeScript? ¡Estás en el lugar adecuado! En esta sección te presentamos algunos de los mejores recursos para seguir aprendiendo sobre este popular Lenguaje de Programación.

Recursos para aprender 【TypeScript】 en español y GRATIS

Mejores Libros para aprender TypeScript

Documentación oficial de TypeScript

Otros Lenguajes de Programación que podrían interesarte