Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Regístrate o inicia sesión para continuar aprendiendo:
Veamos cómo definir una clase y su diferencia con una interface. Así mismo, cómo usarla en nuestro ejemplo de la lección anterior junto al operador instanceof.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Lo que quería conseguir con la lección anterior es demostrar que este tipo user no forma parte del código JavaScript que finalmente se genera. Y que por tanto no podemos usar esta expresión. Sin embargo, no te preocupes si esto te parece complejo porque no vamos a usar esto. Si nosotros queremos saludar a un solo usuario o a un arreglo de usuarios, lo usual será definir dos funciones. Una para el arreglo y otra para un solo usuario. No tiene sentido tratar de hacer una función más compleja metiéndole más cosas. Mientras más funciones específicas tengamos, mucho mejor. Así que no te preocupes si no comprendiste muy bien este ejemplo. De todas formas, por si quieres salir de dudas, vamos a hacer la demostración creando una clase. Este es un tipo de dato que no existe en el JavaScript generado. Sin embargo, ahora vamos a crear una clase user que implemente a la interfaz user. La manera de crear clases con TypeScript es bastante similar. Solo debemos tener cuidado de no usar el mismo nombre. Por ejemplo, aquí podemos agregarle un prefijo y para diferenciar a la interfaz de la clase. Para eliminar este error, vamos a definir un constructor para nuestra clase user. Y vamos a permitir que un usuario reciba un nombre, reciba un email, un estado y un ID. Cuando el usuario recibe estos datos a través de su constructor, nosotros los vamos a asignar según corresponde. De esta manera desaparece el error que antes teníamos. Y entonces, nuestro código ahora funciona correctamente. Si nosotros ejecutamos, aquí vemos que se imprime dos veces "hello", porque se entendió que se trata de un arreglo. ¿Sí? Aquí estamos invocando la función greeting, con un arreglo. El arreglo se evalúa aquí correctamente y llega a ejecutar el for each. Si nosotros en vez de usar un arreglo, enviamos un solo objeto... Vamos a limpiar los logs y vamos a ejecutar de nuevo. Si hacemos este cambio no obtenemos ningún log. ¿A qué se debe este problema? Esto se debe a que "u" no es una instancia de user. "u" puede ser una instancia de un arreglo, como ocurrió hace un momento. Pero si usamos el operador "instance of" con esta variable u, no lo reconoce como un objeto de la clase user, porque de hecho aquí se ha creado de esta manera. Tenemos que crear una instancia de user en vez de definir un objeto con llaves. Podemos crear un objeto de la clase user de esta manera. Si declaramos user de esta manera, como una instancia de la clase User, en tiempo de ejecución este "instance of" va a evaluar el objeto, va a ver que si es un objeto de la clase User, y entonces va a imprimir según este console log. En un primer momento funciona con el arreglo porque un arreglo es realmente un arreglo pero no funcionaba de esta forma. ¿Sí? Entonces es importante identificar cuál es la diferencia entre un tipo de dato con una clase y cómo el operador instance of reconoce solo clases. Entonces una vez más, para que esto se comprenda mejor, vamos a crear otra variable, de esta manera. Si nosotros imprimimos user, instance of user, esto nos dirá, verdadero, porque este user se está creando como una instancia de la clase User. En cambio si nosotros hacemos console log de "user2" instance of User, para ver si user2 es una instancia de user esto será false. En resumen, podemos usar tipos de datos para sacarle el provecho a TypeScript y nuestro JavaScript generado, no va a contener esto. Nuestro código será más ligero. Solo en el caso en que nosotros queramos agregar métodos, y disponer de una clase, si nosotros queremos tener un constructor, y tener métodos, solo en ese caso nos conviendrá a crear una clase, de tal manera que esta clase puede tener métodos. Si no la necesitamos, y es suficiente con usar una interfaz, esto será preferible, porque de esta manera, nuestro código JS generado será más ligero, como aquí por podemos ver. Recuerda que si tienes alguna duda, siempre puedes escribir tu pregunta, en la sección correspondiente, para ayudarte a resolverla. Por ahora, con que entiendas cómo definir un tipo de dato usando la palabra reservada interface, y cómo luego aprovechar esto, es suficiente para continuar con el curso. Definir el tipo de dato para nuestras variables nos será muy útil para encontrar errores a tiempo. Es mejor encontrar errores mientras se desarrolla a que el error pase desapercibido, y luego afecte a todos nuestros usuarios.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript
Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos: