Entendiendo el uso de las interfaces en TypeScript

Última actualización: 01 - 11 - 2023

Comencemos definiendo qué es una interfaz de TypeScript

Las interfaces son un tipo de dato personalizado que podemos utilizar en el desarrollo de nuestras páginas o aplicaciones. En ellas podemos definir las propiedades que necesitemos, a diferencia de un objeto ya pre establecido o un archivo JSON.

Como sabemos, TypeScript se caracteriza por tener un tipado en sus datos que nos permite controlar de mejor forma la información que vamos a manejar durante el proceso de desarrollo. Por ejemplo, si en una función que haga una operación matemática esperamos que nos retorne un valor de tipo número, con un algoritmo, petición u operación más compleja podemos asignar que el tipo de dato retornado sea uno que nosotros mismos hayamos establecido a conveniencia.

¿Cómo declarar un interfaz y dónde almacenarla?

Este "molde" que va a almacenar los datos es recomendable guardarlos y declararlos en un archivo aparte para su posterior uso. Si vas a desarrollar una aplicación con Angular, por ejemplo, necesitarás crear un fichero exclusivo para las interfaces y desde ese fichero exportar las interfaz que necesites e importarlo en el componente donde lo requieras. De esta forma centralizas este recurso para que pueda ser utilizado en cualquier parte de la aplicación. Aplica el mismo caso si no estás desarrollando con un framework, tener una carpeta de almacenamiento exclusivo es una practica habitual de desarrollo (También sucede con componentes, proveedores o servicios pero son temas que son aparte de este post 😝).

Ahora, suponiendo que creaste tu fichero de interfaces en una ruta como /app/src/interfaces-app/interfaces.ts veamos cómo declararlas.

export interface NombreDeTuInterfaz {
  propiedad1:tipoDeDato;
  propiedad2:string;
  propiedad3:number;
}

En este ejemplo de pseudo código ilustrativo vemos las siguientes características 🧐:

  1. Se utiliza la declaración de export para poder llevar esta interfaz a otro lado de la app

  2. Se usa la palabra reservada interface para declarar que es un tipo de dato personalizado

  3. Se declara el nombre que vas a asignarle a tu interfaz

Respecto a las propiedades. ☝🏻

Como cualquier variable en TypeScript puedes asignar qué tipo de dato quieres que sea según tu conveniencia o necesidad. Como tip, puedes asignar otra interfaz en las propiedades.

¿Cómo usar la interfaz ya creada?

Deberás ubicarte en el componente, provider, página o módulo donde vayas a utilizar tu interfaz y una vez ahí importarla. Este paso, aunque sea tonto, es relevante ya que a veces nos halamos el cabello por algo que no está funcionando y es por no haber realizado la exportación/importación correspondiente. 😅 Siempre es bueno verificar esto y no confiarse de los auto completados.

import {NombreDeTuInterfaz} from "/donde-sea-que-hayas-hecho-el-fichero";

El uso que quieras darle va a depender de tu desarrollo, ya sea porque tú mismo hiciste una API, personalizaste la respuesta y quieres renderizarla o quieres mantener un estándar en la presentación de tus datos. Cualquier uso que necesites es válido.

Hasta ahora se ha visto de forma básica la creación y el uso de una interfaz de TypeScript aunque se puede jugar con la información de las propiedades.

Valores por defecto, valores bloqueados y valores opcionales en una interfaz de typescript

Los valores por defecto en una interfaz son datos que no puedes cambiar ni reasignar como si fuese un objeto literal. Los valores bloqueados, a diferencia de un valor por defecto, solo pueden ser asignados una vez si en la interfaz se especificó el tipo de dato que va a contener esa propiedad (lo veremos más abajo con un ejemplo). Los valores opcionales son aquellos que no son obligatorios usar; un detalle de las interfaces es que si las propiedades son declaradas sin ser opcionales es porque se deben usar todas las propiedades.

interface NombreDeTuInterfaz {
  valorPorDefecto:"Este dato es inamovible";
  readonly propiedadBloqueada:string;
  propiedadOpcional?:number;
}

¿Qué cambia cuando las propiedades son declaradas de esta manera? 🤔

  1. Los valores por defecto se van a mantener así durante el flujo de la aplicación a no ser que lo cambies en su directorio raíz

  2. A las propiedades bloqueadas se les puede asignar un valor según su tipo de dato y estos van a ser inmutables. Para que una propiedad esté bloqueada se le antecede la palabra reservada readonly

  3. La forma de declarar una propiedad opcional es colocando un signo de interrogación de cierre (?) al final del nombre de la propiedad, esto hace que al momento de utilizar la interfaz no sea necesario usar este dato

Aplicando la herencia con las interfaces en TypeScript

Las interfaces son tratados como objetos o clases y como tal se pueden aplicar sus características. Se pueden crear interfaces que hereden propiedades de otra interfaz.

Para este ejemplo usaré un paralelismo con la serie Kimetsu no Yaiba con el protagonista Tanjiro Kamado.

Preámbulo:

Kimetsu no Yaiba se trata de una serie donde hay dos facciones que luchan entre si, los demonios y los cazadores de demonio; estos últimos poseen habilidades basadas en "respiraciones elementales" que combinan con técnicas de espada japonesa. El protagonista es un cazador y tomaremos las características de los cazadores para armar a Tanjiro.

//Creando la interfaz

interface DemonSlayer{
  name:string;
  breath:string;
  rank:string;
  swordColor:string;
  demonsKilled?:number;
}

//Creando otra interfaz heredando las características de DemonSlayer

interface MarkedDemonSlayer extends DemonSlayer{
  skill1:string;
  skill2:string;
}

//Creando al prota xD

const newDemonSlayer:MarkedDemonSlayer = {
  name:"Tanjiro Kamado";
  breath:"Respiración de agua";
  rank:"Kanoe";
  swordColor:"Negro";
  skill1:"Respiración solar";
  skill2:"Un cabeza dura pero este dato es para el ejemplo xD";
}
Volver