Tipos de Datos en TypeScript

Javascript es magico porque nos permite escribir código de forma implícita, pero esta es un arma de doble filo, porque podemos crear typos o bugs que están en el código pero no lo sabremos hasta que ejecutemos dicho código, incluso, no lo sabremos hasta que se ejecute la linea donde esta el error, mientras tanto el bug vivirá en el programa y no nos daremos cuenta.

Así es como aparece Typescript, para ayudarnos a identificar un error instantáneamente, al mismo tiempo que escribimos código. Typescript realiza un análisis estático de nuestro código, el editor se ejecuta encontrando errores, llamados de funciones incorrecto o código incompleto. Ademas de su tipado, Typescript nos permite compilar nuestro código a Vanilla Js (Debemos especificarle a la versión que queremos compilarlo), por estas y más razones, en la comunidad lo conocen cómo Javascript con poderes.

---

Type annotations

En Typescript tenemos los mismo datos que estamos acostumbrados a usar en Javascript, con unas pequeñas excepciones. El global scope de Typescript no nos permite crear variables con el mismo nombre aun cuando las usemos en archivos diferentes; para evitar esto tenemos dos opciones:

1. Crear un Function Scope

(()=>{})();

De esta forma creamos un bloque, y nuestras variables vivirán únicamente en la función y no interferirá si nombramos una variable con el mismo nombre en otro archivo.

1. Modulos

Otra forma es, hacer uso de módulos, usar el import y export que ya conocemos desde Javascript. con esto typescript entenderá que esa variable será usada en otro archivo, para fines de los ejemplos aquí mostrados, usaremos la primera opción.

Tipos de Datos

Si queremos usar los datos primitivos de javascript como los string, bool, números, etc; basta con solo agregar el tipo de datos a la variable. || Importante escribir el tipo de datos en minúscula ||

(()=>{
   let carBrand: string;
   let carYear: number;
   let haveLicense: boolean;


   carBrand = 'Ford';
   carYear = 2020;
   haveLicense = false;
})()

Union Type

Con esta herramienta podemos indicarle a typescript que una variable puede recibir dos o incluso 3 valores diferente. ejemplo:

 (()=>{
//aquí supondremos que esperamos recibir el id en forma de string, número y para uso del ejemplo, en booleano también. 

   let userId: number | string | boolean;
   userId: 123456;
   userId: 'miIdEsMiNombre'
})()

Type o Alias en Typescript

Es un keyword exclusiva de typescript, que utiliza el Union Type y con la cual podemos crear nuestro propio tipo de dato. Los Alias nos permiten darle un nombre a uno o varios tipos de datos en conjunto dependiendo cual sea nuestra nececidad. Un ejemplo de como se definen sería así:

 (()=>{
   type shirtSize = number | string | boolean;
})()

Importante que el keyword type este en minúscula, ahora veremos un ejemplo de cual podría ser su uso:

(()=> {
     type shirtSize = 'S' | 16 | 12 | false | 18 | 'XL' | 'M' | 'L' | 'XXL';
})()

Cuando recibamos la talla de la camisa, ya tendremos especificado que dato es el que esperamos, solo los valores que están permitidos serán los que se aceptan, como podemos ver, tenemos diferentes tallas, en letras, números, y bool si es que pretendemos que alguna no tenga talla.

Arrays y Objetos

Si así como en las variables queremos que nuestro array pueda aceptar diferente valores, y solo el que le especifiquemos y no otros datos con los que no contemos, lo hacemos así:

(()=>{
   let arrayMixed: (number | string | boolean)[] = []

arrayMixed.push("a");
arrayMixed.push(1);
arrayMixed.push(true);

arrayMixed = ["a",1, true];
})()

Si queremos escribir objetos, y que especificarle los tipos de datos que esperamos lo hacemos de la siguiente manera:

(()=>{
    const login = (data: { email: string, password: number, name: string, celphone: number }) => {
    console.log(data.email,
      data.password,
      data.name,
    data.celphone)
  }
  login({
    email: '[e-mail]',
    password: 12345,
    celphone: 99402691,
    name: "JUANQUI"
  })

})()

Una de las ventajas que tenemos al trabajar los objetos y arrays de esta forma es que, cuando intentemos pasar los valores typescript nos advertirá que tipos de datos son los que espera, ademas no permitirá que falte alguno, pero que pasa si no queremos enviar todos los valores obligatoriamente? y si queremos que algunos sean opcionales? bueno eso lo hacemos con el símbolo (?). Nuestro ejemplo quedaría así con datos opcionales:

(()=>{
 type Product = {
    title?: string,
    created?: Date,
    stock?: number,
    creator?: string
}

})()

Cuando insertemos los valores typescript ya no nos advertirá en caso que nos olvidemos enviar alguno de los parámetros que especificamos.

Null y Undefined

En typescript, Null y Undefined no es números ni string, si no mas bien seria de tipo Any (valor que veremos adelante). Ejemplo:

(()=>{
  function printName(name: string | null){
     if (name){
    console.log('Hola ' + name)
}else {
    console.log('Ingrese su nombre')
 }
}
printName('Nick')
printName(null)

//////////
  function printName2(name: string | null) {
    let hello = "Hola ";
    hello += name?.toLocaleLowerCase() || ' Agrega tu nombre'
    console.log(hello)
  }
 printName2(null)
 printName2("jean")
})()

Ambos ejemplos funcionan muy bien, en caso del segundo ejemplo basta con preguntarle si name es un string, si podemos usar los métodos para los string, significa que es true, entonces no seria necesario usar la sentencia "if" de forma explicita.

Any

El ultimo tipo que veremos es el tipo any. Any es un keyword exclusivo de typescript, la cual nos ayuda evitar las variables explicitas en typescript (Cabe mencionar que any es un tipo de dato que se evita usar por su flexibilidad, su mal uso podría traer mucho problemas, por ello no es recomendado usarlo, y si lo usas, hazlo con mucha responsabilidad).

Con Any evitamos usar el union type, como mencionamos, lo recomendado es no usarlo, hay pocos ejemplos en los que se puede usar, lo importante es saber que existe y que se debe tener cuidado al usarlo. Typescript nos advierte que en el único contexto que deberíamos usarlo es cuando tratamos de migrar de javascript a typescript. pero a medida obtengas experiencias que limites o extingas su uso.

(()=> {
  let myCarBrand: any;
  myCarBrand = [];
  myCarBrand.push("Ford");
  myCarBrand = {}
  myCarBrand = false //No tengo auto

//si despues de esto imprimimos en cosola el valor de myCarBrand obtendremos:
 false
})()