Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. TypeScript
Code

Inicio Para Principiantes, Parte 3: Interfaces

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 2: Basic Data Types
TypeScript for Beginners, Part 4: Classes

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Comenzamos esta serie con un tutorial de introducción que te introducen a las diferentes características de mecanografiado. También le enseñó cómo instalar TypeScript y sugirió algunas IDEs que puede utilizar para escribir y compilar su propio código de TypeScript.

En el segundo tutorial, cubrimos diferentes tipos de datos disponibles en TypeScript y cómo usarlos pueden ayudarle a evitar muchos errores. Asignar a un tipo de datos como una string a una variable particular dice mecanografiado que desea asignar una cadena a ella. Basándose en esta información, mecanografiado puede señalarlo más tarde cuando intenta realizar una operación que no debe hacerse en las cuerdas.

En este tutorial, usted aprenderá sobre las interfaces en TypeScript. Con interfaces, puede dar un paso más y definir la estructura o tipo de objetos más complejos en el código. Al igual que tipos de variables simples, estos objetos también tendrá que seguir un conjunto de reglas creadas por usted. Esto puede ayudarle a escribir código con más confianza, con menos posibilidades de error.

Creando Nuestra Primera Interfaz

Digamos que tienes un objeto de lago en el código y usarlo para almacenar información sobre algunos de los lagos más grande por área en el mundo. Este objeto de lago tiene propiedades como el nombre del lago, su área, longitud, profundidad y los países en que existe ese lago.

Los nombres de los lagos se guardará como una cadena. Las longitudes de estos lagos será en kilómetros y serán las áreas en kilómetros cuadrados, pero ambas de estas propiedades serán almacenados como números. Las profundidades de los lagos será en metros, y esto también podría ser un flotador.

Puesto que todos estos lagos son muy grandes, sus costas generalmente no se limitan a un solo país. Se utilizará una matriz de cadenas para almacenar los nombres de todos los países en la orilla de un lago particular. Un valor Boolean puede utilizarse para especificar si el lake es agua salada o agua dulce. El siguiente fragmento de código crea una interfaz para el objeto de nuestro lago.

La interfaz de Lakes contiene el tipo de cada propiedad que vamos a utilizar al crear los objetos de nuestro lago. Si ahora intenta asignar a diferentes tipos de valores a cualquiera de estas propiedades, se producirá un error. Aquí es un ejemplo que almacena información acerca de nuestro primer lago.

Como se puede ver, no importa el orden en que asigna un valor a estas propiedades. Sin embargo, no puede omitir un valor. Usted tendrá que asignar un valor a cada propiedad con el fin de evitar errores al compilar el código.

Esta manera, mecanografiado se asegura de que usted no faltó ninguno de los valores deseados por error. Aquí hay un ejemplo donde olvidamos para asignar el valor de la propiedad de depth de un lago.

La captura de pantalla siguiente muestra el mensaje de error en código de Visual Studio después de que olvidé de especificar la depth. Como se puede ver, el error claramente indica que estamos perdiendo la propiedad depth para nuestro objeto de lago.

Missing Property Values in TypeScript Interface

Haciendo la Propiedades de la Interfaz Opcionales

A veces, puede que necesite una propiedad sólo para algunos objetos específicos. Por ejemplo, supongamos que desea agregar una propiedad para especificar los meses en los que un lago se congela. Si agrega la propiedad directamente a la interfaz, como lo hemos hecho hasta ahora, obtendrá un error para otros lagos que no congelar y por lo tanto no tener ninguna propiedad frozen. Asimismo, si agrega esa propiedad a los lagos que se congelan pero no en la declaración de interfaz, se da un error.

En tales casos, puede añadir un signo de interrogación (?) después del nombre de una propiedad para establecer como opcional en la declaración de interfaz. Esta manera, no conseguirá un error por falta de propiedades o propiedades desconocidas. En el ejemplo siguiente, se debe dejar claro.

Utilizando el Indice de Firmas

Propiedades opcionales son útiles cuando un buen número de los objetos van a utilizarlos. Sin embargo, ¿qué pasa si cada lago también tenía su propio conjunto de propiedades como las actividades económicas, la población de diferentes tipos de flora y fauna floreciente en ese lago, o los poblados alrededor del lago? Agregar muchos diferentes propiedades dentro de la declaración de la propia interfaz y hacerlos opcional no son ideal.

Como solución, TypeScript permite añadir propiedades extras a objetos específicos con la ayuda de las firmas del índice. Agregar una firma de índice a la declaración de interfaz le permite especificar cualquier número de propiedades de diferentes objetos que están creando. Necesita realizar los siguientes cambios en la interfaz.

En este ejemplo, he utilizado una firma de índice para agregar información acerca de diferentes asentamientos alrededor de los lagos. Ya que cada lago tendrá sus propios asentamientos, no utilizando propiedades opcionales habría sido una buena idea.

Como otro ejemplo, supongamos que está creando un juego con diferentes tipos de enemigos. Todos estos enemigos tienen algunas características comunes como su tamaño y la salud. Estas propiedades se pueden incluir en la declaración de interfaz directamente. Si cada categoría de estos enemigos tiene un conjunto único de las armas, esas armas pueden ser incluidas con la ayuda de una firma de índice.

Propiedades de Sólo Lectura

Cuando se trabaja con objetos diferentes, puede que necesite trabajar con propiedades que sólo pueden modificarse cuando creamos primero el objeto. Puede marcar estas propiedades como readonly en la declaración de interfaz. Esto es similar al uso de la palabra clave const, sino const se supone para ser utilizado con variables, mientras que readonly se entiende por propiedades.

Escrito permite realizar arreglos de discos de sólo lectura mediante ReadonlyArray<T>. Crear una matriz de sólo lectura resultará en la eliminación de todos los métodos mutando desde eso. Esto se hace para asegurarse de que no puede cambiar el valor de los elementos individuales más adelante. Aquí es un ejemplo del uso de matrices y propiedades de sólo lectura en las declaraciones de interfaz.

Funciones e Interfaces

También puede utilizar interfaces para describir un tipo de función. Esto requiere que la función de una firma llamada con su lista de parámetros y tipo de valor devuelto. También debe proporcionar un nombre y un tipo para cada uno de los parámetros. Aquí está un ejemplo:

En el código anterior, hemos declarado una interfaz de función y utiliza para definir una función que resta el daño infligido a un tanque de su salud. Como se puede ver, no tienes que utilizar el mismo nombre para los parámetros en la declaración de la interfaz y la definición del código para trabajar.

Reflexiones Finales

Este tutorial le presenta a interfaces y cómo usted puede utilizar para asegurarse de que está escribiendo código más robusto. Ahora debe ser capaz de crear sus propias interfaces con características opcionales y de sólo lectura.

También aprendió a utilizar índice firmas para agregar una variedad de otras propiedades a un objeto que no están incluidos en la declaración de interfaz. Este tutorial fue significado para comenzar con interfaces por escrito, y usted puede leer más sobre este tema en la documentación oficial.

En el siguiente tutorial, usted aprenderá acerca de las clases en TypeScript. Si usted tiene alguna pregunta relacionada con las interfaces, hágamelo saber en los comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.