9gustin

Empezando con Typescript

Si hay que usar solo una palabra para definirlo diría que es Escalabilidad, en todo sitio donde se hable al respecto se va a mencionar que es el principal beneficio por el cual debemos usarlo, pero...

Que es Typescript?

Typescript es un lenguaje de programación, es como Javascript y un poquito mas. No son cosas diferentes, de hecho, a medida que vayan saliendo mejoras en Javascript (en futuras versiones de Ecmascript) las mismas se van a poder usar en Typescript.

Entonces siempre me surge la duda de porque a muchos programadores le agobia pensar en Typescript, de por si, si uno no se quiere poner estricto, el código en Javascript anda en Typescript, por lo tanto uno puede integrarlo a su desarrollo progresivamente.

Un pequeño detalle a tener en cuenta es que la extensión de un archivo Typescript es .ts y este archivo pasa por un compilador para convertirse en código Javascript. Es decir que Typescript se utiliza para desarrollar, pero en definitiva lo que se sube a producción es código Javascript.

Tipando cositas

El principal beneficio de Typescript es poder agregarle un tipo a variables, parámetros, valores de retorno de una función, lo que quieras tipar básicamente. Esto nos da mas control sobre el código, ya que en un ideal toda variable y sus propiedades tendrían tipos, por lo tanto evitamos todos los bugs que podrían surgir relacionados.

Los tipos de cada dia:

  • string: Este tipo representa una cadena de texto. Ejemplo: 'foo'
  • number: Este tipo se utiliza para valores numéricos. Ejemplo: 12
  • boolean: Este tipo se utiliza para valores lógicos, y los valores posibles son true o false

También es posible declarar arrays con elementos de estos tipos. Esto se hace de la siguiente manera: tipo[]. Es decir string[] para un array que va a contener textos, number[] para un array de valores numéricos y boolean[] para un array de valores lógicos.

Con entender esto ya podemos comenzar. Pero antes, existe un tipo que es como un salvavidas, para casos en donde no sabes que tipo corresponde y no tenes el tiempo disponible para investigar mas a detalle y se llama any, una variable de tipo any puede contener cualquier tipo, es como declarar una variable hoy en día en Javascript.

Como usar los tipos?

Vamos a ver una comparación de código Javascript con código Typescript(tipado).

Ejemplo de declaración de variables:

// index.js

const username = '9gustin';

const age = 21;

const likeMatecito = true;

//index.ts

const username: string = '9gustin';

const age: number = 21;

const likeMatecito: boolean = true;

Ejemplo de declaración de tipo de retorno para funciones:

// index.js

function getMyName() {

return '9gustin';

}

//index.ts

function getMyName(): string {

return '9gustin';

}

Ejemplo de declaración de tipo para parámetros de una función:

// index.js

function sumNumbers(num1, num2) {

return num1 + num2;

}

//index.ts

function sayHelloToMe(num1: number, num2: number): number {

return num1 + num2;

}

Si queres podes probar esto en el Playground de Typescript, en este podemos interactuar con el código y viendo como se compila automáticamente a Javascript, incluso acá podemos ver los errores de compilación que genera Typescript y son positivos a la hora de prevenir bugs. También, tenemos el botón de Run que nos permite ejecutar el código.

En el playground vas a poder probar que pasa si declaras una variable de tipo numérico y le asignas de valor un string(Spoiler: te va a saltar un error de compilación). Podes probar hacer cosas mas complejas y ver como se va comportando.

Uniones de tipos

No necesariamente una variable tiene que ser de un tipo exclusivamente. Es posible declarar que una variable puede tener un tipo u otro. Por ejemplo:

// index.ts

let phoneNumber: string | number;

Tengo mi variable phoneNumber, que soporta un formato de texto, que podría ser '351-123 456789' y también soporta un formato numero, que podría ser 351123456789. Y en esa linea de código lo que le indica esto a Typescript es el separador | , al poner esto Typescript ya sabe que la variable que se esta declarando puede variar en su tipo. Solo dentro de los tipos declarados, es decir, phoneNumber no podría tener un valor de true o false por ejemplo.

Usando phoneNumber(suponiendo que ya fue declarada como lo hicimos arriba)

// index.ts

phoneNumber = '351-123 456789'

console.log(phoneNumber) // Escribirá en la consola: '351-123 456789'

phoneNumber = 351123456789

console.log(phoneNumber) // Escribirá en la consola: 351123456789

Y no habrá ningún error de compilación.

Algunos tipos mas complejos

  • undefined

    Este tipo se usa para decir que algo es opcional y por lo tanto puede quedar sin definirse.

    Por ejemplo, voy a hacer una función que se encargue de saludar y reciba un parámetro opcional de nombre. En caso de venir undefined se saludara a todo el mundo.

    //index.ts

    function sayHello(name: string | undefined): string {

    if (name === undefined)

    return 'hello world'

    } else {

    return 'hello' + name

    }

    sayHello() // Retornara 'hello world'

    sayHello('9gustin') // Retornara 'hello 9gustin'

  • null

    El tipo null es similar al undefined, solo que se utiliza para decir que algo esta vacío, mientras que undefined es para decir que algo no fue definido, hay una pequeña diferencia. Se utiliza al igual que los demás tipos. Ejemplo:

    //index.ts

    let password: string | null;

    password = 'abc123';

    executeLogin(password);

    password = null;

    En este caso lo que se hizo fue tomar una contraseña, ejecutar un login y luego vaciar la variable contraseña para seguridad del usuario.

  • interface

    Las interfaces son similares a las clases, se utilizan para tipar un objeto que tiene un conjunto de propiedades. En el caso de las interfaces se utilizan para crear tipos, creamos una interfaz cuando queremos representar algo. Voy a retomar el primer ejemplo y crear una interfaz para definirme.

    // index.ts

    interface Person {

    username: string;

    likeMatecito: boolean;

    age: number;

    }

    Acá se usa la palabra reservada interface para comenzar a declarar una interfaz, seguido del nombre de esta interfaz y luego llaves que engloban las propiedades de esa interfaz, es decir, que esta interfaz se llama Person y tiene 3 propiedades, username(string), likeMatecito(boolean) y age(number). Las propiedades se declaran con un tipo y separadas por un punto y coma.

    Ahora voy a usar esta interfaz como un tipo, teniendo en cuenta que la declare arriba:

    // index.ts

    const 9gustin: Person = {

    username: '9gustin',

    likeMatecito: true,

    age: 21

    }

    Cuando queremos crear una variable de este tipo se debe pasar un objeto JSON con los valores para las propiedades de la interfaz(username, likeMatecito y age).

    Este es un tipo complejo, te recomiendo que entiendas bien los otros primero y luego juegues con este.

Finalizando ;)

Todo esto ultimo que vimos lo podes probar también en el Playground , pero te dejo esta serie de videos sobre Typescript: TypeScript 4.0 . En donde particularmente en el video 3 y el video 4 explica la instalación y compilación, para lo que puedas comenzar a utilizar en tu proyecto!

Y te dejo la documentación oficial de Typescript: Doc. Oficial

Volver