Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
En esta lección vemos que una interface nos permite declarar un tipo, pero no es lo mismo que una clase.
Hemos visto en una lección anterior cómo definir una función que acepte un usuario, y luego cómo definir una función que acepte un arreglo de usuarios.
¿De qué manera podemos adaptar nuestra función para que funcione correctamente, ya sea que le pasemos un arreglo o un solo usuario?
Podemos hacerlo usando union
. Entonces, aquí vamos a recibir un arreglo de usuarios o bien un solo usuario.
Aquí estamos diciendo que esta variable u
representa a un arreglo de usuarios o bien a un solo usuario.
Por lo tanto, aquí obtenemos un error, porque forEach
sólo se permite sobre arreglos, no se permite sobre el tipo user
, como aquí bien nos lo indica.
Podrías estar pensando en usar algo así:
u
es una instancia de user
, un solo console.log
.u
es una instancia de un arreglo de user
, un forEach
.Esto parece tener sentido. Sin embargo, aquí tenemos un error.
Si nosotros ejecutamos, nos dice que user is not defined
. ¿Qué ocurre aquí?
instanceof
es un operador de JavaScript. Podemos usarlo para ver si una instancia es de una clase determinada.
Sin embargo, en nuestro caso, user
no es una clase. No lo hemos definido usando esta sintaxis.
En nuestro caso, user
es simplemente un tipo de dato que nos ayuda durante el desarrollo del proyecto. Nos permite identificar errores, como antes hemos visto.
Sin embargo, no podemos usar el operador instanceof
con user
, porque cuando se compila nuestro código TypeScript para generar código JavaScript, este tipo de dato deja de existir en tiempo de ejecución.
user
existe en tiempo de compilación, para verificar errores, pero cuando el código TypeScript se convierte en JavaScript y se ejecuta en el navegador, este tipo deja de existir. Por lo tanto, no podemos usar instanceof
con una interface
.
Si hubiésemos definido una clase, esto sí sería válido.
Si nos vamos a la pestaña de JavaScript, podemos ver el código generado a partir de TypeScript.
Podemos notar lo siguiente:
user
.user2
.Sin embargo, en ningún lugar se define user
.
Por lo tanto, cuando intentamos ejecutar el código, obtenemos el error: User is not defined
.
Es importante saber esto:
instanceof
es un operador de JavaScript que nos permite verificar si una variable es una instancia de una clase.User
en este caso no es una clase, sino un tipo definido con interface
, útil solo en tiempo de compilación.User
no existe, lo que causa este error.Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Hemos visto en una lección anterior cómo definir una función que acepte un usuario, y luego cómo definir una función que acepte un arreglo de usuarios. ¿De qué manera podemos adaptar nuestra función, para que funcione correctamente? Ta sea que le pasemos un arreglo, o un solo usuario. Ello lo podemos hacer usando union. Entonces aquí vamos a recibir un arreglo de usuarios, o bien, un solo usuario. Aquí estamos diciendo que esta variable u representa a un arreglo de usuarios, o bien un solo usuario. Por lo tanto aquí obtenemos un error, porque for esh sólo se permite sobre arreglos, no se permite sobre el tipo user, como aquí bien nos lo indica. Podrías estar pensando en usar algo así: si u es una instancia de user, un solo console log, si no, si u es una instancia de arreglo de user, un for each. Esto parece tener sentido, sin embargo, aquí tenemos un error. Si nosotros ejecutamos nos dice que user "is not defined". ¿Qué ocurre aquí? "instanceof" es un operador de JavaScript. Podemos usarlo para ver si esta instancia es una instancia de una clase determinada. En nuestro caso, user no es una clase. No lo hemos definido usando esta sintaxis. En nuestro caso, user es simplemente un tipo de dato, que nos ayuda durante el desarrollo de nuestro proyecto. Nos ayuda a identificar errores como antes hemos visto. Sin embargo no podemos usar el operador "instanceof" con user, porque una vez de que se compile nuestro código de TypeScript para generar código de JavaScript este tipo de dato ya no va a existir en tiempo de ejecución. Existe durante el desarrollo, en tiempo de compilación, para verificar si hay algún problema. Pero cuando nuestro código se ejecuta ya en el navegador, cuando nuestro código de TypeScript se convierte a código de JavaScript, este tipo de dato deja de existir, y por lo tanto no podemos usar "instance of" con una interface. Si hubiésemos definido una clase, esto sí sería válido. Así que esto no es posible, y es importante tenerlo en cuenta. Si nos vamos aquí a la pestaña de JavaScript, de hecho podemos ver cuál es el código JavaScript que se genera, a partir de nuestro código de TypeScript. Como podemos ver, se genera aquí una variable "user", una variable "user2", se genera aquí nuestra función de saludo, y nuestra invocación de la función, pero en ningún lugar se define que es user. En ningún lugar se define user, por lo tanto, cuando intentamos ejecutar, obtenemos este error. "User is not defined". ¿Sí? Entonces es importante saber esto. "Instance of" es un operador de JavaScript que nos permite ver si una variable es una instancia de una clase determinada. Sin embargo, user en este caso no es una clase, es un tipo, que se ha definido con esta palabra interface, y que nos sirve durante el desarrollo. Pero para el código JavaScript que generamos, user no existe, por lo tanto esto causa este error.
¿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 😉.