Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
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.
El objetivo de la lección anterior era demostrar que el tipo user
no forma parte del código JavaScript generado y, por tanto, no podemos usar esta expresión directamente.
No te preocupes si esto parece complejo, ya que no lo utilizaremos. Si queremos saludar a un solo usuario o a un arreglo de usuarios, lo ideal es definir dos funciones: una para el arreglo y otra para un solo usuario.
Mientras más funciones específicas tengamos, mejor será nuestra organización del código.
Si no comprendiste del todo este ejemplo, no te preocupes. Para aclararlo, vamos a hacer una demostración creando una clase.
Este tipo de dato no existe en el JavaScript generado. Ahora crearemos una clase User
que implemente la interfaz User
. La sintaxis en TypeScript es similar a la de JavaScript, pero debemos evitar repetir nombres.
✅ Para diferenciar la interfaz de la clase, podemos agregarle un prefijo.
Para eliminar el error, definiremos un constructor en nuestra clase User
. Este constructor recibirá:
Cuando el usuario reciba estos datos a través del constructor, los asignaremos correctamente. De esta manera, el error previo desaparecerá y nuestro código funcionará sin problemas.
Si ejecutamos el código, veremos que se imprime dos veces "hello", porque TypeScript reconoce que estamos tratando con un arreglo.
En este caso, la función greeting
recibe un arreglo y ejecuta un forEach
, procesando cada elemento correctamente.
🔄 ¿Qué pasa si en vez de un arreglo enviamos un solo objeto?
Vamos a limpiar los logs y ejecutar nuevamente. Si hacemos este cambio, no obtenemos ningún log.
🔎 ¿Por qué ocurre esto?
El problema es que u
no es una instancia de User
. Si usamos instanceof
con u
, veremos que:
u
puede ser un arreglo, pero no se reconoce como un objeto de la clase User
.User
en lugar de definir un objeto con llaves ({}
).🚀 Solución:
Si declaramos user
como una instancia de la clase User
, el operador instanceof
lo evaluará correctamente y nuestro console.log
imprimirá el resultado esperado.
Es importante entender la diferencia entre un tipo de dato y una clase, así como la manera en que el operador instanceof
reconoce solamente clases.
Ejemplo:
console.log(user instanceof User); // true ✅
console.log(user2 instanceof User); // false ❌
En este caso:
user
se crea como instancia de User
, por lo que instanceof
devuelve true
.user2
, en cambio, no es una instancia de User
, por lo que devuelve false
.💡 Resumen: Podemos usar tipos de datos en TypeScript para mejorar nuestro código sin afectar el JavaScript generado. Esto hace que nuestro código sea más ligero y eficiente.
✅ Cuándo usar una clase:
❌ Cuándo NO usar una clase:
📩 Si tienes dudas, deja tu pregunta en la sección correspondiente y con gusto te ayudaré a resolverla.
Por ahora, con que entiendas:
interface
.…es suficiente para continuar con el curso. 😉
🛠️ Nota final: Definir tipos de datos correctamente nos ayuda a detectar errores a tiempo, evitando problemas en producción que podrían afectar a los usuarios.
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 aprender a programar, gratis?
Sólo debes registrarte 😉.