Definir un Interface con TypeScript

17/Sep/2017 Typescript Deja un comentario
Programación TypeScript

Definir un interface con TypeScript nos da la capacidad de realizar validaciones de estructuras obligatorias dentro el código. Una de las características del lenguaje TypeScript es el tipado de las variables y el control que hace sobre ello. Pero, ¿qué sucede cuándo hay una estructura con un conjunto de propiedades? Es en este caso cuando nos podemos ayudar en un interface de TypeScript.

Para definir un interface con TypeScript tenemos que utilizar la palabra reservada interface seguida del nombre del interface.

  1. interface nombreInterface { ... }

Dentro de la definición del interface irán las propiedades que queramos que sean obligatorias. La estructura del código será la siguiente:

  1. interface nombreInterface {
  2. propiedad1: tipo-dato;
  3. propiedad2: tipo-dato;
  4. }

Por ejemplo podemos definir un interface Persona de la siguiente forma:

  1. interface Persona {
  2. nombre: string;
  3. edad: number;
  4. }

Ahora podemos utilizar el interface, por ejemplo, en una función:

  1. function datosPersona(p: Persona) {
  2. console.log(p.nombre);
  3. }

Lo que estamos consiguiendo al utilizar el interface en la función es que, al menos, deben de venir dos valores informados, estos corresponderán con el nombre y la edad.

Así podremos realizar la siguiente llamada a la función:

  1. let p1 = {nombre:'Carlos', edad:42, localidad:'Zamora'}
  2. datosPersona(p1);

Vemos que la definición del elemento que pasamos a la función tiene los dos parámetros. Aunque luego tenga parámetros adicionales.

En el caso de que falte algún parámetro no podremos compilar el código. Por ejemplo el siguiente código no funcionaría:

  1. let p2 = {nombre:'Carmen', localidad:'Zaragoza'};
  2. datosPersona(p2); // Error de Compilació

Vemos que la propiedad edad no está definida, por lo cual no cumplimos con el interface.

Así hemos conseguido definir un Interface con TypeScript de una forma sencilla.

Vídeos sobre TypeScript


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*