typeScript (2): tipos y funciones

Introducción a las variables tipadas y las funciones de ts

Stanley Boxer

archivado en: JavaScript / 28 Agosto, 2016 / taller:

En la entrada anterior vimos cómo preparar el entorno para trabajar con typescript, un metalenguaje que permite programar javaScript con algunas características que mejoran su solidez. Comenzamos con las variables y las funciones.

Variables tipadas

Una de las características más alabadas de ts es que permite tipar las variables, como ocurre en java, lo cual contribuye a que las cosas sean lo que deben ser. Desde mi punto de vista esto está sobrevalorado, ya que no influye en los tiempos de ejecución -pues una vez compilado, se pierden los tipos- y muy zote debe ser quien cambie el valor de una variable en las pocas líneas que suele tener un método y más zote aún si es una global que se maneja a lo bestia a lo largo de una aplicación, pero bueno, el caso es que ahí está y, al menos, permite tener una visión más clara del código.

Para «tipar» una variable hay que indicar el tipo después los dos puntos.

let myVar: boolean = false;

Los tipos más sencillos que podemos definir son

  • boolean
  • number
  • y string

Para los arrays tenemos dos posibilidades principales. Si el array contiene elementos del mismo tipo, vale con indicarlo y a continuación el par de corchetes característico.

let myArray: number[] = [1, 2, 3, 4, 5];

Si, por el contrario, incluye elementos de distinta naturaleza, hay que ir indicándolos uno a uno de forma correlativa (un tostón, para qué vamos a mentirnos).

let myArray: [string, number, boolean, string] = ['foo', 2, true,'bar'];

Para los objetos, el tema se complica. Una posibilidad es definirlos como any, que sirve para obviar el tipo.

let myObject: any = {};

myObject.foo = 'bar';

Otra es jugar con las interfaces, un tema del que hablaré en la próxima entrada de esta serie.

Cuando picamos en ts podemos, y debemos, usar las nuevas variables let y const de javaScript. (+ información).

Funciones tipadas

En las funciones también se pueden definir los tipos, tanto en los parámetros de entrada como en el de salida. Los primeros entre los paréntesis y el segundo antes de las llaves.

function bazinga(foo: string, bar:string) : string {

return foo + bar;

}

Si la función no retorna nada, como tipo hay que indicar void, un término que resultará muy familiar a los javeros y que viene a significar precisamente eso, nada, vacío.

function awesome() : void {

console.log('Awesome!');

}

Sobre las nuevas funciones arrow, las funciones anónimas que se escriben con la expresión ()=>, en las que no se pierde la referencia del this, no tengo yo muy clara la historia. Por lo que he deducido durante 3 minutos de búsqueda intensa en la especificación oficial, ya existían en typeScript antes que en ecmaScript y eran una manera de escribir de forma acotada las funciones (ignoro si también hacían algo con el this). Por ejemplo, para referirse a una función callback.

function processValue (value: number | (() => number) ) {

var x = typeof value !== "number" ? value() : value;

}

Ahora bien, al intentar hacer algo así, me canta como error la definición del tipo de retorno.

const myObject = {

bazinga: (foo: string)=> string {

return foo;

}

};

Si no lo indico, se lo zampa sin problemas.

const myObject = {

bazinga: (foo: string)=> {

return foo;

}

};

Y el js que renderiza en modo e6 me respeta la función arrow. Por lo tanto, decía, parece que se puede usar de dos maneras, para escribir de forma acotada las funciones, pero también como las funciones arrow de ecma6, una cuestión sobre la que necesito seguir investigando.

Mucho ojo con el this cuando compilamos para ecma5, que las function arrow se convierten en funciones normales y puede haber sorpresas. Ante la duda, no hay nada como cachear el this en self, that o similar.

Cosas muy chulas de las funciones ts

Salvo que se venga de java, hasta el momento se podría pensar que poca cosa aporta ts a javaScript salvo aumentar su natural verbosidad, pero aquí van tres características interesantes para trabajar con funciones.

a. Parámetros por defecto

¡Sí! Como ocurre con ecma6, con ts nos podemos ahorrar este tipo de fórmulas:

function bazinga(foo) {

foo = foo || 'default';

}

Más elegante ^^:

function bazinga(foo = "default") {
}

b. Parámetros obligatorios

¡Sí! si una función no recibe tantos parámetros como tiene definidos, casca.

function bazinga(foo: string, bar:string) : string {

return foo + bar;

}

bazinga('Awesome');

/* error TS2346: Supplied parameters do not match any signature of call target. */

Para indicar que un parámetro es opcional, hay que añadir una interrogación (?):

function bazinga(foo: string, bar?:string) : string {

c. El resto de parámetros

En js tenemos la propiedad arguments para recuperar todos los parámetros que se le pasan a una función, estén o no declarados. El ts esto se consigue precediendo con tres puntos el último parámetro declarado, que se convierte en un array con todo lo que le llegue. A mí no me convence mucho esto, ya que por limpieza del código prefiero que todos los parámetros estén escritos de forma clara y reconocible.

function bazinga(...loQueLlegue: string[] ) : string {

let allArgs = loQueLlegue.join(', ');

console.log('ha llegado: ' + allArgs);

/* ha llegado: foo, bar, Awesome */

}

bazinga('foo', 'bar', 'Awesome');

Bueno, me quedaría hablar de la sobrecarga (overloads) de funciones que permite ts, pero como eso es una porquería inmunda, me remito a la documentación si alguien está interesado y yo por mi parte lo dejo aquí.

|| Tags:

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*