PropType

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”.

Crea una cuenta y continúa aprendiendo 🚀

PropType