Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
PropType
Veamos cómo definir una interface para nuestros productos, y cómo usarla para validar nuestros props.
¿Por qué no estamos usando TypeScript?
El uso de TypeScript es opcional y recomendable. Por lo tanto, es lo que vamos a hacer ahora.
Supongamos que ProductCard espera un producto que tenga nombre y precio, y nosotros le quitamos el precio a uno de ellos. ¿Qué pasaría?
- Al guardar el componente no podrá mostrar el precio de dicho producto porque no se dispone de un precio.
- ¿De qué manera podemos forzar que siempre se defina un precio?
- Si el producto es gratuito, podemos mostrar "gratis" en lugar de dejarlo vacío o poner
0.
Definiendo una interfaz en TypeScript
Es importante hacer uso de TypeScript para manejar estos casos.
- Actualmente no hay errores porque
propsno exige un tipo de dato en particular. - Vamos a usar la sintaxis de objeto en lugar de un arreglo con una cadena.
-
productserá de tipoproduct. - Para esto, necesitamos una interfaz
product.
Pasos para definir la interfaz:
- Agregar un archivo con el nombre
product.tsdentro de la carpeta de ejemplos. - Escribir la interfaz:
-
nombre: cadena de texto. -
precio: número.
-
- Exportar la interfaz con
exportpara poder importarla en otros archivos.
Uso de la interfaz en ProductCard
- Definir
props.productcon el tipo de datoproduct. - Importar la interfaz con
import type. - En Vue, definir los tipos de
propsusando un objeto en lugar de un arreglo. - Si se usa un tipo de dato complejo, emplear
PropTypede Vue. - Para evitar el error "Product posiblemente no se encuentre definido":
- Agregar un objeto adicional en
props. - Indicar el tipo.
- Definir
required: true.
- Agregar un objeto adicional en
- Con esto,
propsasegurará queProductCardsiempre recibaproduct.
Navegación en Visual Studio Code
En VS Code se puede usar Ctrl+Click sobre product para ir a su definición.
Uso de TypeScript en ProductList
- Al volver a
ProductList, se detecta que hay un producto sin precio definido (price undefined). - Esto se detectó gracias a TypeScript.
- Para solucionar el error, agregar el precio y guardar.
Para definir products como un arreglo de product:
- Usar
<product[]>para indicar que es un arreglo de productos. - Importar la interfaz
product. - Hacer casting de
productscomoArray<product>.
Si volvemos al navegador:
- El proyecto sigue funcionando correctamente.
- Ahora estamos siendo explícitos sobre el tipo de datos.
- El tipo de
props.productqueda validado correctamente.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Hasta aquí estamos bien. Pero te preguntarás por qué no estamos usando TypeScript. En realidad, el uso de TypeScript es opcional y es recomendable. Por lo tanto, es lo que vamos a hacer ahora. Supongamos que “ProductCard” espera un producto que tenga nombre y precio, y nosotros le quitamos el precio a uno de ellos. ¿Qué pasaría? Al guardar el componente no va a poder mostrar el precio de dicho producto porque no se dispone de un precio. Entonces ¿De qué manera podemos nosotros forzar que siempre se defina un precio? Porque si estamos dando un producto gratis, tal vez queremos decir “gratis”. Mostrar aquí el texto gratis en vez de dejar esto vacío o simplemente poner “0”. Para que nosotros podamos detectar esos casos. Es importante hacer uso de TypeScript. Aquí no hay ningún error porque estamos definiendo un props, pero este no exige ningún tipo de dato en particular. Estamos declarando esto de una manera muy general. Por lo tanto, lo que vamos a hacer ahora es usar esta otra sintaxis de objeto en vez de pasar aquí un arreglo con una cadena. Vamos a pasar aquí un objeto. Vamos a decir que “product” es un “product”. Para que esto funcione tiene que existir una interfaz “product”. Vamos entonces a definir esta interfaz porque aún no contamos con ello. Por ahora lo vamos a hacer dentro de la misma carpeta de ejemplos. Vamos a agregar un archivo con el nombre “product” para definir esta interfaz vamos a renombrar el archivo con la extensión “.ts” para indicar que aquí estamos haciendo uso de TypeScript. Aquí vamos a escribir “interface” seguido de en nombre de nuestro tipo de dato, que en este caso es “product”. Y aquí vamos a definir sus datos. Por ejemplo, por ejemplo, vamos a definir que nombre es una cadena y el precio es un número. La idea es definir esta interfaz en un solo lado y luego usarlo desde donde se requiera. En este caso lo vamos a necesitar desde dos lados, desde “ProductCard”, para que lo reciba como prop y desde "ProductList" para definir nuestro arreglo de productos. Entonces vamos a agregar aquí la palabra reservada a export para luego poder importar esta interfaz desde donde es necesario. Por ejemplo, aquí en “ProductCard” estamos definiendo un prop product con el tipo de dato product, pero esta interfaz no se encuentra declarada dentro de este archivo. Para poder usarlo agregamos aquí el inicio “import product”. De hecho, como aquí estamos importando un tipo de dato, tenemos que usar “import type”. Tal como estamos viendo aquí en la documentación de Vue para poder definir tipos para nuestros props, tenemos que usar un objeto en vez de un arreglo. Indicamos el nombre de la propiedad y su tipo de dato. Aquí, por ejemplo, se dice que el nombre es una cadena y que el id puede ser un número, pero también una cadena. Esos son tipos nativos, “string”, “número”. Si nosotros queremos usar un tipo de dato más complejo, tenemos que hacer uso de “PropType”, que es algo que nos proporciona Vue. Por ejemplo, aquí han definido una interfaz book que consta de atributos y luego para indicar dentro de este props que una propiedad tiene un tipo determinado, se hace uso de esta sintaxis. Se declara con un objeto, pero usando este “PropType” se declara de manera más específica la interfaz o tipo de dato. Entonces eso es justamente lo que vamos a hacer aquí. Product es un object, pero debe ser considerado de manera específica como un objeto de esta interfaz. Ahora, sin embargo, ha aparecido aquí un resaltado con un mensaje de error que nos dice “Product posiblemente no se encuentre definido”. Esto es porque estamos diciendo cuál es su tipo de dato, pero nos falta indicar que este product es un campo requerido. Por lo tanto, aquí agregamos un objeto más, indicamos por aquí el tipo y adicionalmente indicamos que este es un prop requerido. Si hacemos esto, el warning desaparece porque ese request se va a asegurar de que este componente siempre reciba de manera obligatoria un product. Y el tipo de este product será específicamente una interfaz product. Visual Studio Code nos permite dar control, click para ir a la definición de una interfaz o de una clase. Entonces, si yo le doy “Ctrl+click” product me va a enviar a donde se encuentra definido. Muy bien, entonces este componente “ProductCard” ya se encuentra listo. Sin embargo, si volvemos a “ProductList”, nos vamos a encontrar ahora con un error. Se ha detectado que hay un producto que tiene su precio sin definir. Tiene un “price undefine”. Se está hablando específicamente de este producto y se ha detectado gracias a que estamos haciendo uso de TypeScript. Entonces, para solucionar esto, vamos a agregar el precio y guardamos. Si volvemos al navegador, nuestro resultado es correcto y adicionalmente estamos validando el tipo de nuestro prop llamado product. Si queremos hacer uso de TypeScript adecuadamente también en ese "ProductList", entonces vamos a tener que definir aquí que product es un arreglo de la interfaz producto. En este caso estamos definiendo products, como un arreglo. ¿Cómo podemos indicar qué tipo de dato es este arreglo?. Podemos usar estos símbolos de menor o mayor e indicar aquí que se trata de un arreglo. Específicamente es un arreglo de productos para poder usar product aquí, tal como hicimos antes, tenemos que importar el tipo product. Tras importarlo. Ya podemos usarlo. Si lo único que hemos hecho aquí es agregar esto que se conoce como casting para indicar cuál es el tipo de dato del valor que estamos asignando. En este caso, el tipo de dato es un arreglo de productos, por eso ponemos “array product”. Si volvemos al navegador vemos que nuestro proyecto continúa funcionando, solo que estamos siendo explícitos respecto al tipo usado en estos datos y también al momento en que lo recibe el componente hijo “ProductCard”.
¿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