Funciones en TypeScript
Funciones en TypeScript
Bien una vez que ya
configuramos WebMatrix (clic aquí para
ver como se hace) para poder trabajar con TypeScript, vamos a ver cómo trabajar
con funciones dentro del TS y cómo es
que nos ofrece cierta ventajas sobre JS.
Para empezar con este ejemplo
crearé un nuevo proyecto dentro de WebMatrix y un archivo TypeScript con el
nombre “funciones.ts”.
Una vez que se crea el archivo nos
aparece una ventana como la siguiente, en la cual del lado izquierdo nos
aparecen los archivos que contiene el sitio (1) en que estamos trabajando, que
en este caso solo nos debería mostrar el archivo que recién creamos “funciones.ts”,
en la parte inferior (2)nos aparecen los distintas pestañas dentro de las
cuales se nos presentará información sobre los archivos que estemos trabajando
para este ejemplo nos centraremos en la pestaña error la cual como su nombre lo
indica presenta los errores que tendremos en nuestro código TypeScript cuando
lo compilemos. Y como ya lo habíamos mencionado para compilar nuestro código tenemos
el botón llamado “compile TypeScript”(3), y en el centro tendremos nuestro
espacio de trabajo(4).
La primer función que veremos es
la más básica la cual no recibe parámetros ni devuelve parámetros, para indicar
que una función no devuelve ningún valor debe de llevar la palabra reservada ‘void’,
al final de la firma del método.
function fbasica():void{
alert('funcion sin parametros');
}
Las siguientes funciones regresan
algún valor sin que recibir ninguno. Hay que recordar que estamos trabajando
con un lenguaje tipado por lo tanto, no podemos regresar cualquier valor a excepción
que sea una función de devuelva valores de tipo ‘any’. Si no tendríamos un error de compilación.
//metodo sin valor de retorno
function fbasica():void{
alert('el valor de euler es: '+f1());
}
// metodo que exclusivamente regresa valores numericos
function f1(): number{
// regresa un valor de la constante de euler
return Math.E;
}
// metodo que solo regresa cadenas de texto
function f2(): string{
// la variable sitio se declara implicatamente como string
var txt = "http://jwebmx.blogspot.mx/";
return txt;
}
//metodo encargado de regresar un arreglo de numeros primos
function f3():number[]{
var numeros:Array<number> = [1, 2, 3, 5, 7, 11, 13];
return numeros;
}
//metodo que regresa cualquier tipo de valor
function f4():any{
return f5();
}
//metodo que tambien regresa cualquier tipo de valor
function f5(){
return true;
}
fbasica();
alert("gracias por visitar "+f2());
console.log("Los Primero Números Primos Son "+f3());
Este código ya fue probado tanto
en WebMatrix como en chrome y opera, te invito a que lo pruebes en el tu
archivos funciones y lo compiles, y te darás cuenta que automáticamente WebMatrix
genera la versión de en JavaScript, este código no posee errores, pero en caso
tenerlos, WebMatrix nos avisa en que línea se encuentran y cuál es el posible
error.
Funciones con recepción de parámetros
Las funciones dentro de TS
permite recibir parámetros de cualquiera de los tipos de datos, en este ejemplo
se muestra una función que recibe dos parámetros de tipo lógico y regresa una
cadena que depende de los valores recibidos.
//funcione encargada de recibir dos valores booleanos y regresar una cadena
function meCaso(ella:boolean,el:boolean):string{
return (ella&&el)==true?"Hay Boda":"No Hay Boda";
}
console.log(meCaso(true,true));
console.log(meCaso(false,true));
La función recibe el arreglo de
valores numéricos que devuelve la función f3(), para sumarlos y devolver la suma
de dichos valores:
// funcion encargada de recibir un arreglo de valores numericos y devolver la suma de todos
function getSumaArray(numeros:Array<number>):string{
var suma = 0;
var i = 0;
for(; i<numeros.length;i++)
{
suma += numeros[i];
}
return "La Suma De lo Valore Recibidos Es "+suma;
}
console.log(getSumaArray(f3()));
Funciones con parámetros opcionales
TypeScript permite crear
funciones con parámetros opcionales es se vuelve funcional ya que a veces
alguno de los valores que recibimos no siempre es necesario o es repetitivo,
veamos como declara una función de este
tipo y las precauciones que debemos tomar.
Para declarar un parámetro opcional dentro una función
se utiliza la siguiente nomenclatura:
Esto le dice al compilador que
puede o no contener ese valor, pero si respeta el tipo de dato que se indica
asi que no puede ser sustituido por un valor de otro tipo a menos que el tipo de
dato no se indique o se indique como any.
Ejemplo:
// funcion que permite que se le pase o no un valor
function getNombre(nombre:string,apellidos:string,titulo?:string):string{
return "Buen Día, "+titulo+" "+nombre+" "+apellidos;
}
console.log(getNombre("Pablo","Gómez","Sr."));
console.log(getNombre("Alicia","Valles","Srita."));
console.log(getNombre("Francisco","Pantera"));
Si nosotros ejecutamos este código
el compilador no marca error en la última línea y permite la generación del
archivo del archivo .JS, pero si vemos la salida en la consola de cualquier
navegador nos parece un extraño vemos que al ejecutar la última llamada de la
función.
Vemos
que en vez de dejar un espacio en blanco nos coloca el valor ‘undefined’ y esto
es correcto ya que ese parámetro no se inicializó cuando la función fue
recibida y es por eso que aparece con este comportamiento, para evitar que esto
nos ocurra cuando trabajamos con parámetros opcionales TS, permite establecer
un valor por defecto, que solo se modificará si al momento de llamar la función
esta llamada posee el valor para dicho parámetro. La forma de establecer el
valor por defecto es al momento de la declaración del parámetro establecemos el
valor por defecto para dicho parámetro.
Veamos como quedaría nuestro
ejemplo corregido:
// funcion que permite que se le pase o no un valor
function getNombre(nombre:string,apellidos:string,titulo="C."):string{
return "Buen Día, "+titulo+" "+nombre+" "+apellidos;
}
console.log(getNombre("Pablo","Gómez","Sr."));
console.log(getNombre("Alicia","Valles","Srita."));
console.log(getNombre("Francisco","Pantera"));
Con lo cual la salida en la
consola del navegador quedaría corregida:
Sí ha
estado revisando el código generado por compilador de TS a JavaScript hasta el
momento se podría pensar que lo único que hace el compilador es quitar los
tipos de datos que se establecen dentro de TS, pero si ahora vemos el código que
genera el compilador por la función anterior podemos ver que automáticamente el
compilador establece las condiciones necesarias para que lo que nosotros
pusimos como valor por defecto en TS sea respetado de igual manera dentro del
archivo JS.
Veamos cómo queda en los archivos:
Vemos que automáticamente el
compilador lo primero que hace dentro del método en JS es verificar si se
asigno algún valor para el parámetro ‘titulo’ y en caso de no ser así la
función asigna la cadena de texto “C.”, que fue establecida por defecto en la función
TS.
Funciones con resto de parámetros
Al igual que muchos lenguajes de
programación TypeScript permite crear funciones con longitud de parámetros variable,
esto quiere decir que nuestra función puede aceptar N cantidad de valores, siempre y cuando respetemos el tipo de dato
que acepta el parámetro de la función. Vemos como se declara y como trabajar
con este tipo de funciones:
A continuación te muestro la misma
función una programada en TS y su igual en JS, para que compares y empecemos a
ver como empieza a dar benéficos la utilización de TS para generar código JS.
...
Si deseas descargar los archivos fuente de estos códigos da clic aquí, saludos.
