TypeScript / Funciones

Bienvenidos sean a este post, hoy veremos un tema que usamos anteriormente pero muy por arriba.

Hasta ahora hemos visto a las funciones pero de manera muy superficial. En typescript se utilizan de la misma manera pero a su vez tenemos algunas posibilidades que vimos en posts anteriores, tales como la opcionalidad, la propagacion y otros. Tambien tenemos otras posibilidades como la firma, veamos el primer concepto mediante el siguiente ejemplo:

function concatenar(a: string, b?: string)
{
        connsole.log(a + b);
}
concatenar("tinchicus",".com");
concatenar("tinchicus");

Definiremos una funcion para concatenar dos valores de tipo string, pero con una curiosidad. El segundo argumento lo haremos opcional y por lo tanto dejara de ser obligatorio pero como sucedia en otros casos sino lo pasamos tomara el valor undefined. En el bloque mostraremos el valor de la concatenacion de los dos argumentos. Para finalmente hacer dos llamados a la funcion con distintos valores, veamos como es la salida:

$ node funcion.js
tinchicus.com
tinchicusundefined
$

Podemos ver que sucedio lo comentado anteriormente, en el caso de pasar los dos valores nos realizo la concatenacion pero en el segundo caso al no pasar un valor nos devuelve un undefined y este lo podemos manejar a nuestra necesidad tal como vimos en este post.

Otra opcion muy interesante que tenemos es la posibilidad de poder establecer valores predeterminados a los argumentos, para en caso de no informar uno le pasara el valor que le establecimos. Veamos el siguiente codigo:

function concatenar(a: string, b: string = ".com")
{
        console.log(a + b);
}
concatenar("tinchicus",".net");
concatenar("tinchicus");

Este codigo es igual al anterior pero con sutiles diferencias. La primera diferencia es el segundo argumento donde quitamos el operador opcional y le establecimos un valor mediante el operador de asignacion. Si le pasamos un valor usara el informado, en caso de no inforrmarlo usara este. Despues la siguiente modificacion fue el segundo argumento que pasamos en el primer llamado. Veamos como funciona ahora nuestro codigo:

$ node funcion.js
tinchicus.net
tinchicus.com
$

En lugar de usar a undefined al momento de no pasar la segunda variable nos paso el predeterminado. Esta opcion es interesante para cuando necesitamos manejar un valor como minimo y en caso de no informarlo lo podemos establecer asi.

Al comienzo mencionamos que tenemos el operador opcional para cuando no informamos un valor. La funcion lo pasa como si fuera un undefined y podemos manejarlo como si fuera este tipo, tal como vimos en este post, pero en realidad javascript considera todos los argumentos de las funciones como opcionales y por ende podemos omitirlo sin necesidad del operador. Pero como comentamos tambien podemos usar al operador de propagacion para realizar una operacion muy interesante. Para entender el concepto vamos a analizar el siguiente codigo:

function nombreCompleto(user: string, ...args: string[] )
{
        let nombre: string = "";
        for(let i = 0; i < args.length; i++)
                nombre += args[i] + " ";

        console.log(user + " " + nombre);
}
nombreCompleto("tinchicus", "Martin", "Miranda");

Primero tenemos una funcion donde recibe un valor de tipo string, lo siguiente es un operacion que vimos en este post. Donde mediante la propagacion y los corchetes le decimos al lenguaje que este sera una cantidad variable de argumentos, en este caso del tipo string, y por ende, agregaremos todos los que necesitemos, en un rato lo veremos en accion. Dentro del bloque del codigo definiremos una variable donde almacenaemos los datos enviados en los argumentos variables, para ello usaremos un bucle donde pasaremos por todos y los almacenaremos en la variable anterior. Si observan usamos un operador abreviado que en este caso equivale a:

nombre = nombre + args[i] + " ";

Para finalmente mostrar el primer argumento recibido y el resultado final de concatenar los valores anteriores. Por ultimo hacemos un llamado a la funcion y le pasamos unos valores, veamos como es su salida:

$ node funcion.js
tinchicus Martin Miranda
$

Observen como nos paso los dos valores que pasamos despues del primero y si le hubieramos pasado mas datos estos se hubieran agregado. Esta es una excelente opcion para cuando debemos pasar una cantidad no definida de valores pero no deben olvidar de usar el operador de propagacion y los corchetes junto al tipo de dato. Nuestro siguiente tema es uno muy utilizado como son las funciones de callback, analicemos el siguiente codigo:

function callback(mensaje: string)
{
        console.log(mensaje);
}
function llamado(msj: string, fn: (msg: string) => void)
{
        fn(msj);
}

llamado("Hola, Mundo", callback);

Primero definimos una funcion que usaremos como callback, esta recibe un mensaje y luego lo muestra en la consola. La siguiente sera la funcion que usaremos para llamarla, en esta ocasion recibira un texto y luego el otro argumento sera una funcion donde recibira un texto como argumento. En el bloque tenemos un llamado a este argumento y le pasamos el argumento anterior. Trabajarlo asi nos facilita que le podamos pasar cualquier funcion como argumento y por ende de callback. Esto lo observamos en la ultima linea donde ponemos un mensaje y luego el llamado con el nombre a la primera funcion. Si lo compilamos y probamos sucedera lo siguiente:

$ node funcion.js
Hola, Mundo
$

Obtuvimos la devolucion de la llamada de callback porque como dijimos este al usar el nombre que le pasamos como argumento siempre usara al nombre que le pasamos como argumento para realizar la accion.

Esto que hicimos no solo implica que podemos pasar una funcion como argumento sino que tambien le hicimos una firma porque al pasarlo de la forma que hicimos solo aceptara funciones, tomemos el codigo anterior y al final agreguemos la siguiente linea:

llamado("Hola, Mundo", "texto de prueba");

Hacemos un nuevo llamado a la funcion pero esta vez sin la funcion de callback y le pasamos un texto, compilemos y veamos que sucede:

$ tsc funcion.ts
funcion.ts:11:24 - error TS2345: Argument of type 'string' is not assignable to parameter of type '(msg: string) => void'.

11 llamado("Hola, Mundo", "texto de prueba");
                          ~~~~~~~~~~~~~~~~~


Found 1 error in funcion.ts:11

$

Como dijimos al firmarlo como una funcion cuando pasemos un parametro distinto nos informara que tenemos un error. Esta es una buena forma de mantener seguro el intercambio de informacion ya que si no cumplen la firma o forma que establecimos la funcion nos devolvera este error.

Al igual que en otros lenguajes, typescript nos permite una tecnica de otros lenguajes como es overload, esta nos pemite una alternativa a la union de tipos que vimos en este post. Analicemos el siguiente codigo:

function agregar(a: string, b: string): string;
function agregar(a: number, b: number): number;
function agregar(a: any, b: any) {
        return a + b;
}
console.log(agregar("tinchicus",".com"));
console.log(agregar(1, 2));

Observen que al inicio definimos dos prototipos con una funcion con el mismo nombre llamada agregar, en el primer caso recibira solo dos valores de tipo string y lo unico que puede devolver un tipo string, en el segundo caso ocurre lo mismo pero solo con number. El ultimo sera la definicion de nuestra funcion donde recibira valores de tipo any y en este devolveremos la suma o concatenacion, dependiendo del tipo de los dos valores informados. Lo siguiente seran dos llamados a la funcion donde primero enviaremos dos tipo string y luego dos de tipo number. Compilemos y veamos como es su salida:

$ node funcion.js
tinchicus.com
3
$

Como pueden ver funciono perfectamente y nos devolvio lo que establecimos. Volvamos al codigo anterior y agreguemos la siguiente linea al final:

console.log(agregar(1, "hola"));

En este caso pasamos un parametro distinto a cada uno de los argumentos. Compilemos y veamos como es la salida:

$ tsc funcion.ts
funcion.ts:8:13 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(a: string, b: string): string', gave the following error.
    Argument of type 'number' is not assignable to parameter of type 'string'.
  Overload 2 of 2, '(a: number, b: number): number', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'number'.

8 console.log(agregar(1, "hola"));
              ~~~~~~~~~~~~~~~~~~

  funcion.ts:3:10
    3 function agregar(a: any, b: any) {
               ~~~~~~~
    The call would have succeeded against this implementation, but implementation signatures of overloads are not externally visible.


Found 1 error in funcion.ts:8

$

En este caso nos devolvio un error. Como nos indica en el mensaje los tipos de datos informados no coinciden con el overload. Y mas adelante nos indica que mas alla de la definicion de nuestra funcion con el tipo any no cumplimos con las overloads o sobrecargas anteriores. En este caso puede ser mejor para determinados temas que la union de tipos porque nos mantendria un codigo mas seguro para evitar ciertas combinaciones que pueden derivar en errores a futuro.

El ultimo tema que tocaremos es llamado literales, es una mezcla entre enum y los alias de tipos. Este es una forma muy particular de limitar los valores permitidos a un conjunto de valores especificos, estos pueden ser number, string o boolean, veamos el siguiente codigo:

type cdnPermitidos = "uno" | "dos" | "tres";
type numPermitidos = 1 | 2 | 10;
function literal(e: cdnPermitidos | numPermitidos) {
        console.log("llamado con " + e);
}

literal("uno");
literal("dos");
literal(1);
literal("tres");
literal(4);
literal("cuatro");

Las primeras dos definiciones son de alias de tipos. En el primer caso definimos literales de tipo string y solamente esos tres, lo mismo hacemos para el segundo caso pero solo con number. Luego tenemos una funcion donde el argumento le pasaremos los dos conjuntos anteriores con el operador de union, esto hara que solo se permitiran los valrores detallados anteriormente, es lo que se llama literal, y en el bloque solamente mostraremos el valor recibido. Luego tenemos varios llamados a la funcion con distintos valores pero en los ultimos dos solo usamos valores que no tenemos en los conjuntos. Compilemos y veamos como es la salida:

$ tsc funcion.ts
funcion.ts:11:9 - error TS2345: Argument of type '4' is not assignable to parameter of type 'cdnPermitidos | numPermitidos'.

11 literal(4);
           ~

funcion.ts:12:9 - error TS2345: Argument of type '"cuatro"' is not assignable to parameter of type 'cdnPermitidos | numPermitidos'.

12 literal("cuatro");
           ~~~~~~~~


Found 2 errors in the same file, starting at: funcion.ts:11

$

Observen que nos devolvio un error porque pasamos dos valores que no estan en el grupo. Como pueden deducir esto nos permite crear un gran filtro para determinados valores y que solo manejemos esos valores.

En resumen, hoy hemos visto funciones, que es, para que sirve, como se utiliza, las distintas opciones que tenemos disponibles, ejemplos para ver sobre las opciones comentadas, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.