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
Function Greeting
En esta lección vemos que podemos definir tipos para los parámetros de nuestras funciones, y gracias a Typescript obtenemos un autocompletado.
Definiendo una función en TypeScript
Ahora nosotros vamos a quedarnos solamente con dos usuarios y vamos a definir una función.
Vamos a definir una función que se va a llamar greeting, o sea, "saludo". Esta función va a recibir un usuario y se encargará de saludar a dicho usuario.
Parámetros de la función
En la lista de parámetros, agregamos un usuario e indicamos el tipo de dato, en este caso, User. Como vemos, la sintaxis es similar: el tipo de dato viene luego de los dos puntos.
Implementación de la función
Dentro de la función, imprimimos un mensaje por consola que dirá Hello, seguido del nombre del usuario.
Cuando escribimos user y usamos un punto (.), obtenemos acceso al autocompletado.
Esto es gracias a TypeScript, porque TypeScript sabe que user respeta este tipo de dato y que, por lo tanto, tiene estos atributos disponibles.
Así, podemos escribir user.name. Sin TypeScript, solo tendríamos esto sin autocompletado.
Por eso, es importante definir los tipos de datos también para los parámetros de nuestras funciones.
Prueba de ejecución
Vamos a hacer la prueba de que esto funciona. Llamamos a greeting y le pasamos user1.
- Nos dirigimos a la pestaña de logs.
- Hacemos clic en
Run. - Se imprime el mensaje
Hello,seguido delnamedel usuario que se le pasa.
Si cambiamos esto por user2 y ejecutamos nuevamente, imprimirá el mensaje correspondiente.
Manejo de errores
¿Qué pasa si enviamos el valor null?
Si enviamos null, obtenemos un error porque greeting espera un User, no un null.
Esto nos ayuda a solucionar errores en nuestro programa, ya que muchas veces invocamos funciones sin pasar los parámetros adecuados.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Ahora nosotros vamos a quedarnos solamente con dos usuarios y vamos a definir una función, vamos a definir una función que se va a llamar greeting o sea saludo, esta función va a recibir un usuario y va a encargarse de saludar a dicho usuario, entonces como lo definimos en su lista de parámetros, vamos a agregar un usuario y vamos a indicar el tipo de dato, en este caso user, como vemos la sintaxis es similar, el tipo de dato viene luego de los dos puntos, entonces aquí vamos a imprimir un mensaje por consola que dirá hello, seguido de el nombre del usuario, como vemos ni bien yo escribo user y pongo este punto, obtengo acceso a este autocompletado, esto es gracias a typescript porque typescript sabe que este user respeta este tipo de dato y que por lo tanto tiene estos atributos disponibles, entonces aquí podemos escribir name, sin typescript sólo tendríamos esto y no habría ningún autocompletado, por eso es importante definir los tipos de dato también para los parámetros de nuestra función, para los parámetros de nuestras funciones, vamos a hacer la prueba de que esto funciona, vamos a llamar a greeting y le vamos a pasar el usuario 1, este usuario de acá, nos vamos a la pestaña de logs y le damos clica run, ahí está, se ha impreso este mensaje, hello, porque se está imprimiendo esta cadena, seguido del name del usuario que se le pasa, si aquí cambio esto por user2 y corre nuevamente imprime este mensaje, ¿qué pasa si yo envío el valor de null? Si yo envío el valor de null, tenemos un error porque greeting espera un user, no espera un null, entonces esto también nos va a ayudar mucho a solucionar errores que hay en nuestro programa, porque muchas veces invocamos funciones y no pasamos los parámetros adecuados. ¡Adiós!
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
11
Function Greeting
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript