Primera app en TypeScript Primera app en TypeScript

🥇 Primera app en TypeScript

Vamos a crear una aplicación muy sencilla que haga una petición utilizando fetch para retraer datos e imprimir los resultados dentro de la terminal.

No vamos a enfocarnos en la sintaxis, únicamente en mostrar las posibilidades de aquello que es posible con typescript y como podemos capturar los errores con typescript.

Para realizar las peticiones sobre la red utilizaremos la librería axios con la cual vamos a consultar la API jsonplaceholder.typicode.com.

jsonplaceholder es una dummy api, es decir nos permite realizar consultas y capturas de información para realizar nuestras propias pruebas.

Por ejemplo si queremos leer una lista de todos tenemos que consultar la direccion jsonplaceholder.typicode.com/todos. Si deseamos ver los detalles de un solo todo abrimos la url jsonplaceholder.typicode.com/todos/1 en donde (1) puede ser reemplazado por cualquiera de los ids del listado de todos.

Vamos a leer ahora esta información desde nuestra aplicación.

Creamos un nuevo directorio 001_primer_app dentro de nuestro directorio de proyectos.

mkdir 001_primer_app

Dentro de este creamos un nuevo proyecto.

cd 001_primer_app
yarn init -y .

Instalamos la librería axios.

yarn add axios

En este punto nuestro proyecto debe contener:

🍿 ¿Cómo compilar un archivo typescript (.ts) a javascript (.js)?

Para compilar un archivo typescript a javascript usamos el compilador tsc que acabamos de instalar.

Creamos el archivo index.ts en el cual realizamos una petición para consultar la información del todo con el id 2.

import axios from "axios";

axios
  .get("http://jsonplaceholder.typicode.com/todos/2")
  .then((response) => {
    console.log(response.data);
  })
  .catch((err) => {
    console.error(err);
  });

Ahora podemos compilar nuestro programa con el compilador tsc.

tsc index.ts

Esto nos generará un archivo index.js que podemos ejecutar con node.

node index.js

salida…

{
  userId: 1,
  id: 5,
  title: 'laboriosam mollitia et enim quasi adipisci quia provident illum',
  completed: false
}

Si el programa presentara algún error como una desconexión o una caída de la API, entonces se imprimirá dicho error en lugar de la salida mostrada arriba.

🍿 ¿Cómo ejecutar código typescript directamente?

El programa ts-node permite ejecutar el código typescript sin tener que compilar primero a javascript, si bien lo hace internamente no requiere de ambos pasos por separado sino que realiza ambos de formas transparente para el usuario, que solo ve la salida de la ejecución del código.

ts-node index.ts

salida…

{
  userId: 1,
  id: 5,
  title: 'laboriosam mollitia et enim quasi adipisci quia provident illum',
  completed: false
}

La salida cuando se ejecuta un archivo .ts con ts-node debe ser la misma.

🍿 ¿Cómo ayuda el tipado de typescript?

Conociendo la estructura de nuestra respuesta podemos asumir que:

Con esto en mente podemos crear un contrato (interface) con la cual le indiquemos a nuestro código como debe interactuar con una interface Todo.

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

Aplicamos esta interface a la información obtenida de la API.

import axios from "axios";

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

axios
  .get("http://jsonplaceholder.typicode.com/todos/5")
  .then((response) => {

    // indicamos que response.data retorna un tipo Todo
    const todo: Todo = response.data;

    // a partir de aqui el autocompletado funcionara
    // por lo que podemos imprimir los detalles
    console.log(`
        El id es: ${todo.id}
        El titulo es : ${todo.title}
        Esta completado: ${todo.completed ? "si" : "no"}
    `);
  })
  .catch((err) => {
    console.error(err);
  });

A partir de asignarle un tipo todo: Todo, visual studio code nos mostrará las propiedades que todo tiene. Para ello utiliza una funcionalidad llamada intellisense.

🥤 ¿Qué es el intellisense?

El término intellisense se refiere a la capacidad que tienen algunos editores de código de brindar algunas funcionalidades que permiten escribir código de forma mas sencilla, entre las cuales se encuentran el autocompletado de palabras, listado de propiedades y métodos de una instancia, listado de parámetros de una función, etc.

Configurar Visual Studio Code para trabajar con typescript Interfaces, tipos y patrones de diseño
comments powered by Disqus