Dentro de todas las pruebas de diferentes tecnologías que a diario realizo he encontrado que TypeScript es una herramienta que continúa bloqueandome de no aprenderla rápidamente. A continuación una serie de información paso a paso cómo he ido migrando mi concepto y aprendimiento de JavaScript a TypeScript.

INSTALANDO

Inicialmente la instalación del protocolo es supremamente fácil, lo único que se debe hacer ejecutar la instalación directamente desde la consola.

npm install -g typescript

Antes de iniciar con pruebas entender que Typescript extiende a Javascript, es un JavaScript con esteroides; así que no te asustes como me pasaba a mi.

JavaScript

Tomando un ejemplo directamente en Javascript.

function greeter(person) {
    return 'Hello, ' + person;
}
var user = [0, 1, 2];
document.body.textContent = greeter(user);

Typescript incluye fundamentalmente la definicion del Tipo (Type) de datos, por ejemplo en los argumentos.

function greeter(person: string) {
  return 'Hello, ' + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);

Esto permite obtener un error en el ejemplo arriba mencionado:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Esto debido a que estoy pasando un arreglo de números a un argumento previamente definido como String.

Interfaces

La creación de interfaces es una adición a nuestro codigo en Javascript:

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

let user = { firstName: 'Jane', lastName: 'User' };

document.body.textContent = greeter(user);

Clases

De igual manera la deficion de los tipos de atributos en las clases.

class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

let user = new Student('Jane', 'M.', 'User');

document.body.textContent = greeter(user);

Ahora continuare en un proximo post tratando de aplicar esto a React.

Ver código de Ejemplo en GitHub!!!