Empezamos una serie de entradas más técnicas, y lo primero … las funciones en TypeScript.
Funciones
Se definen como un grupo o conjunto de sentencias que solucionan un problema particular.
Tanto en Javascript como en TypeScript, las funciones tienen una cabecera (donde se define el nombre de la función) y un cuerpo (las instrucciones). Pueden ser definidas de diferentes formas, aunque en todos :
- Funciones con nombre
- Funciones anónimas o métodos anónimos
- Funciones lambda
- Funciones definidas en las clases
Todo un ramillete de opciones, para empezar. En todos los casos, las funciones aceptan argumentos, que además se puede forzar a que correspondan a cierto tipo. Pero ¿que pasa cuando queremos un número no determinado de argumentos? En estos casos, se utiliza ? tras el último parámetro.
Otra circunstancia interesante es la posibilidad de asignar valores predeterminados a los parámetros (cómo en Python), simplemente asignando el valor en la definición. También es interesante el uso de …variable: string[], que es la forma de permitir un número indeterminado de parámetros, que acaban recogidos en la variable array variable.
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
var foo = buildName("Joseph", "Samuel", "Lucas"); var foo = buildName("Maria", "Lu");
Cómo veis, se cubren todo tipo de opciones respecto a los argumento de las funciones.
Y ahora, empezamos con las funciones
Funciones con nombre
La primera de las opciones se diferencia de las funciones con nombre de Javascript en que los argumentos pueden asignarse tipos, y lo que devuelven las funciones también
function foo(msg: string) { console.log(msg); }
Pocas diferencias respecto a esta misma función si se escribiera directamente en Javascript:
function foo(msg) { console.log(msg); }
Funciones anónimas
Quizás, esta forma de crear funciones es la que yo más utilizo en Javascript, y al igual que antes, la diferencia es que pueden asignarse tipos en los argumentos y en el resultado:
var foo = function(x: number, y: number): number { return x+y; }
En Javascript, es muy similar:
var foo = function(x, y) { return x+y; }
Si la función no devuelve nada, puede marcarse como void, esto es, sin devolución (cómo en Java o en C#).
Funciones lambda, o funciones de flechas gordas
Las funciones lambda son funciones de una sola instrucción (normalmente) que se almacenan en una variable, o que se ejecutan directamente. Se caracterizan de que NO hace falta escribir return, porque se sobre entiende que la función devuelve algo. Estas funciones lambda no son exclusivas de TypeScript, pues lenguajes como C# o Python también las tienen.
En TypeScript, es identifican por =>, que hace de separador entre los argumentos, y lo que devuelve:
var foo = (x: number, y: number) => x+y;
En realidad, la función sin lambda sería tal que así:
var foo = function (x, y) { return x + y; };
En este caso, se trata de ofrecer diferentes formas de escribir el mismo código a los desarrolladores, algo que a mi, personalmente, me parece lioso. Pero, es mi opinión personal.
Funciones en las clases
Cuando se definen funciones en las clases, una de sus peculiaridades es que no aparece function, sino que se escriben directamente:
class NewClass {
foo(x: number, y:number): number { return x+y; }
}
Ejemplo de funciones en TypeScript
Es hora de aplicar lo aprendido, y vamos con un ejemplo. Se trata de preparar un pequeño formulario, donde poner dos números o cadenas, y sumarlos. Aquí solo pondré el código TypeScript, pues es el que nos interesa.
(function () {
//Lambda function
var $ = (id) => document.getElementById(id);
var totalButton: HTMLButtonElement = <HTMLButtonElement>$('sumar');
var uno: HTMLInputElement = <HTMLInputElement>$('uno');
var dos: HTMLInputElement = <HTMLInputElement>$('dos');
var resultado = $('resultado');
var ejecuta = function(): void {
console.log(uno.value);
console.log(dos.value);
resultado.innerHTML = uno.value + dos.value;
}
totalButton.addEventListener('click', (e) => {
ejecuta()
})
uno.addEventListener('change', (e) => {
// resultado.innerHTML = dos.value + uno.value;
ejecuta();
})
})();
Primero, destacar que todo el código se ejecuta como función anónima. Es muy interesante el uso de HTMLInputElement para trabajar con elementos input desde una variable. Por otro lado, destacar el uso de la función lambda $ para recuperar un elemento del DOM según su ID (hay otros).
Para asociar eventos, se usa AddEventListener, que es la forma en que se vinculan eventos usando Javascript. La idea original es que sea el botón el que tuviera la funcionalidad, pero al final, he introducido que cuando cambia el contenido de los inputs, el resultado sea actualizado inmediatamente.
Puedes acceder a la página completa aquí, para ver el resultado una vez que el código TypeScript es compilado a Javascript.
A mi, personalmente, este primer ejercicio me ha resultado muy interesante para aprender a trabajar con algunos tipos nativos de TypeScript, así como otra serie de aspectos básicos, para ir poco a poco. Lo siguiente es comprender las clases en TypeScript.
Espero que te haya sido de utilidad, y … happy coding!