TypeScript / Tipos basicos

Bienvenidos sean a este post, hoy veremos algunos conceptos de como maneja los tipos de datos el lenguaje.

Definiendo tipos de datos

A diferencia de JavaScript podemos definir como queremos que sean el tipo de dato de una variable, existen dos formas de hacerlo:

• Loose
• Strong

Cuando nos referimos a loose es la forma tradicional donde la variable podra cambiar el tipo de dato que almacena, como lo permite JavaScript, en cambio strong define un tipo de dato para una variable y ese sera el tipo de dato que almacenara y no podremos modificarlo, veamos unos ejemplos:

var prueba = "texto"
... codigo ...
var prueba = 4

Este es una variable de tipo loose porque primero almacenamos un tipo string, despues de un codigo cambiamos el valor y el tipo pero no tendremos ningun inconveniente, veamos un ejemplo del otro tipo:

var cadena: string = "Texto de prueba";
console.log(cadena);

Aqui la diferencia va a radicar es que luego del nombre de la variable usaremos un dos puntos y le especificamos el tipo de dato, despues le pasamos la informacion y por ultimo lo mostramos en pantalla, si lo compilan debe funcionar perfectamente, ahora tomemos ese codigo y modifiquemoslo de la siguiente manera:

var cadena: string = 123;
console.log(cadena);

En este caso cambiamos solamente el tipo de dato que le asignamos a esta variable, veamos que sucede al momento de compilarlo:

$ tsc base.ts
base.ts:1:5 - error TS2322: Type 'number' is not assignable to type 'string'.

1 var cadena: string = 123;
      ~~~~~~


Found 1 error in base.ts:1

$

Como pueden ver esta variable solo aceptara ese tipo de datos, a diferencia de lo que vimos anteriormente o como trabaja JavaScript, pasemos al siguiente tema.

Tipos basicos

Antes mencionamos como podemos definir una variable para que acepte cualquier tipo de dato, su conducta predeterminada, o solamente un tipo de dato (strong) pero que tipos de datos podemos establecer en nuestras variables? bueno, tenemos cuatro tipos basicos:

• boolean
• number
• string
• array

Estos son los cuatro tipos basicos que disponemos de los cuales iremos desarrollando un poco mas en proximos posts y a su vez disponemos de otros tipos pero como dijimos antes los desarrollaremos cuando llegue el momento.

Tipo inferido

Mas alla de lo hablado al comienzo TypeScript tambien posee una mecanica llamada tipo inferido, la cual permite determinar el tipo de variable y nos evita la necesidad de repetir la mecanica comentada anteriormente, para entenderlo veamos este ejemplo:

var cadena = "Texto de prueba";
var numero = 123;
numero = cadena;

Aqui definiremos dos variables,, la primera con tipo string y la otra de tipo number, sin definir el tipo de cada una, para luego asignar uno al otro, veamos que sucede al compilarlo:

$ tsc base.ts
base.ts:3:1 - error TS2322: Type 'string' is not assignable to type 'number'.

3 numero = cadena;
  ~~~~~~


Found 1 error in base.ts:3

$

Si bien tenemos esta mecanica para prevenir este tipo de eventualidades, no se olviden de la mecanica inicial para poder determinar cual es el tipo de dato que debe almacenar.

Tipo Duck

Esta es una mecanica extraña que utiliza TypeScript para determinar tipos raros de variables, para ello toma como concepto:

Si se ve ccomo un pato y grazna como un pato, muy probablemente sea un pato.

Es decir, que dos objetos podemos considerarlos iguales si posee el mismo tipo, y a su vez si poseen metodos y variables, estos deben ser iguales. Para entenderlo vamos a ver un ejemplo:

var objeto = { nombre: "tinchicus", id: 1, print() {} };
objeto = { nombre: "etortore", id: 2, print() {} };
objeto = { id: 3, nombre: "polizzia" };

Primero definimos un objeto donde tendremos dos propiedades de tipo string y number y luego un metodo, en la siguiente definimos el objeto con otros datos pero con la misma estructura y en la tercer linea volvemos a repetir el proceso pero sin metodo, veamos que sucede al compilarlo:

$ tsc base.ts
base.ts:3:1 - error TS2741: Property 'print' is missing in type '{ id: number; nombre: string; }' but required in type '{ nombre: string; id: number; print(): void; }'.

3 objeto = { id: 3, nombre: "polizzia" };
  ~~~~~~

  base.ts:1:44
    1 var objeto = { nombre: "tinchicus", id: 1, print() {} };
                                                 ~~~~~
    'print' is declared here.


Found 1 error in base.ts:3

$

Observen que nos notifica que nos falta un elemento en este caso en la tercer linea porque al definir el objeto pasamos los tres elementos y no deben faltar en los objetos del mismo tipo.

Firmas de funciones

Ya hemos visto como definir el tipo de dato que manejara una variable, a su vez como tenemos tipos inferidos, y por ultimo el «tipo pato». Con esto comentado estas mecanicas nos brindan la posibilidad de poder manejar mejor los tipos de los argumentos de las funciones, para entender de lo que hablamos vamos a realizar un ejemplo simple:

function calcular(a, b, c) {
        return (a * b) + c;
}
console.log("Calcular() = " + calcular(2,3,1));

Tenemos una funcion que toma tres valores de argumentos y nos devuelve la multiplicacion de los dos primeros valores mas la suma del tercero, para finalmente mostrar en pantalla el resultado de la funcion, veamos como es la salida despues de compilado:

$ node base.js
Calcular() = 7
$

Como podemos ver funciono perfectamente pero que sucede si hacemos la siguiente modificacion:

console.log("Calcular() = " + calcular("2","3","1"));

Al momento de llamar a la funcion en lugar de pasar numeros pasamos datos de tipo string, si lo compilamos nuevamente y ejecutamos tendremos esta salida:

$ node base.js
Calcular() = 61
$

Ohhh, que paso? simple, al pasar datos de tipo string nos realizo una concatenacion entre el resultado del parentesis y el tercer valor, con esto tenemos un serio inconveniente y para poder solucionarlo vamos a utilizar la siguiente modificacion:

function calcular(a:number, b:number, c:number): number {
        return (a * b) + c;
}
console.log("Calcular() = " + calcular("2","3","1"));

Hablemos de las diferencias, la primera es que establecimos el tipo de datos que podemos asignarle a los argumentos, la otra modificacion es que establecimos el tipo de dato que debe devolver la funcion y para ello agregamos los dos puntos (:) y el tipo entre el parentesis de la funcion y la llave del bloque, el resto sigue igual y mantuvimos las comillas en los datos, compilemos y veamos la salida:

$ tsc base.ts
base.ts:4:40 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

4 console.log("Calcular() = " + calcular("2","3","1"));
                                         ~~~


Found 1 error in base.ts:4

$

Observen que nos sucedio lo que vimos en todos los casos anteirores, vamos a modificar nuevamente la linea de llamada a la funcion de esta forma:

console.log("Calcular() = " + calcular(2,3,1));

Volvimos a pasar los valores como numeros y no como string, compilemos y veamos como es su salida:

$ node base.js
Calcular() = 7
$

Volvio a funcionar nuestra funcion correctamente pero ahora con el agregado de que nos aseguramos de que aceptara solo numeros, con esto ya tenemos una nocion basica no solo de tipos de datos sino como los manipula TypeScript tanto en el codigo como en el momento de la compilacion.

En resumen, hoy hemos visto varios conceptos basicos de los tipos de datos, primero como establecer el tipo de dato para una variable, luego los cuatro tipos basicos, lo siguiente fueron los tipos inferidos, que son y a que se parecen, luego el «tipo pato», porque se lo denomina asi, y por ultimo como firmar nuestras funciones, 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.