TypeScript

TypeScript

TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft. Es un superconjunto de JavaScript, que esencialmente añade tipado estático y objetos basados en clases. Por tanto, TypeScript extiende la sintaxis de JavaScript, pudiendo utilizar cualquier código de JavaScript sin problemas.

Para su uso es necesario realizar un proceso de transpilación que compila el código TypeScript (ficheros con extensión ".ts") a código JavaScript (ficheros con extensión ".js"). El proceso de transpilación es similar a la compilación, pero a diferencia de esta, en lugar de coger código de alto nivel generar código de bajo nivel, genera código también de alto nivel, como es el JavaScript en este caso.

A continuación veremos algunas nociones básicas sobre la sintáxis de TypeScript.

Variables tipadas

TypeScript soporta 4 tipos básicos de variables: string, number, boolean y any (que define una variable que puede aceptar cualquier tipo). Para indicar el tipo de la variable simplemente tenemos que indicarlo a continuación del nombre separado por dos puntos (:). La definición de tipo es opcional, aunque sí que es recomendable su uso.

a: string = 'Test variable';
b: number = 1;
c: boolean = true;
d: any = 'any type';

// También podemos declarar primero la variable 
// y utilizarla cuando la necesitemos:
e: string;
e = 'Test variable';

También podemos definir un objeto y utilizarlo como tipo de dato, que se declararía y usaría de la siguiente forma:

address: {
    street: string,
    city: string,
    state: string
};

address = {street: 'Main st', city:'Boston', state:'MA'};

TypeScript permite utilizar clases e interfaces como tipo de dato, lo que forzaría a que esa variable solamente pueda contener instancias de ese tipo de objetos. A continuación se incluye un ejemplo de uso para una clase:

a: MiClase = new MiClase();

Podemos definir constantes añadiendo "const" antes de una variable. Es importante destacar que en TypeScript solo se pueden declarar constantes fuera de las clases.

const MICONSTANTE: number = 5;

Let vs. var

También veremos que se utiliza de forma frecuente "let" y "var" para declarar variables (aunque ambos en realidad pertenecen a la sintaxis de JavaScript). Ambos son muy similares: declaran una variable de forma local. La diferencia está en que "let" restringe más el ámbito de la variable. Mientras que con "var" la variable se asocia al ámbito de la función que la contiene (y por lo tanto sería visible incluso antes de su definición), con "let" solo sería accesible en el ámbito en el que se declara. Por ejemplo, si declaramos una variable con let dentro de un bucle, dicha variable solo se podrá utilizar en dicho bucle; pero si lo hacemos con var no, la variable sería accesible antes y después del bucle.

Arrays

Con TypeScript también podemos definir arrays tipados:

a: string[] = ['aaa', 'bbb', 'ccc'];
b: number[] = [1, 2, 3];
c: boolean[] = [false, true, true];
d: any[] = [1, 'aaa', false];

Definición de clases

TypeScript permite declarar clases mediante la palabra reservada "class". Además podemos definir el constructor que se llamará al instanciar la clase:

class MiClase {
    constructor() {
        // Constructor de la clase
    }
    miFuncion() {}    // funciones
}
let a = new MiClase();
a.miFuncion();

En el ejemplo anterior se puede ver también cómo instanciar a una clase y llamar a sus funciones. Además es importante destacar que para la definicón de funciones no tenemos que utilizar la palabra reservada "function".

A continuación se incluye un ejemplo más completo sobre cómo utilizar una clase con parámetros, en la que el constructor recibe una variable, la almacena y después se utiliza desde una función. En este ejemplo se muestra también cómo definir el tipo de parámetro que recibe una función (en este caso el constructor) y cómo utilizar "this" para acceder a las variables miembro de la clase:

class MiClase {
    saludo: string;
    constructor(text: string) {
        this.saludo = text;
    }
    saluda() {
        return "Hello " + this.saludo;
    }
}

let a = new MiClase("world");
a.saluda();

Con TypeScript podemos definir también el ámbito de las variables y de las funciones, por ejemplo:

class MiClase {   
    private a: string = '...';
    public b: string = '...';
    protected c: string = '...';
    private miFuncion() {}
}

Interfaces

También podemos definir una interfaz para forzar a las clases a definir una cierta funcionalidad (tanto variables como funciones):

interface IPoint {
  x: number;
  y: number;
  setPoint(x: number, y:number);
}

class Punto implements IPoint {
  x = 0;
  y = 0;
  setPoint(x: number, y:number) {
    this.x = x;
    this.y = y;
  }
}

Como ya indicamos antes, las interfaces las podemos utilizar también para definir un tipo de dato:

interface Address {
    street: string,
    city: string,
    state: string
}
address: Address;

Exportación e importación

Por defecto el ámbito de cualquier clase definida dentro de un fichero es solamente el propio fichero. Para que una clase se pueda utilizar desde otro fichero tenemos que declararla como "export":

export class HomePage { }

De esta forma estamos exportando o haciendo pública la clase, para que desde otros ficheros se pueda importar:

import { HomePage } from '../home/home';

Herencia

TypeScript nos permite también utilizar herencia. Para esto simplemente tenemos que añadir la palabra reservada "extends" y el nombre de la clase de la cual queremos heredar a la definición de la clase:

class ExtTest extends MiClase {
    constructor() {
        super();    // Llamar al constructor padre
    }
}

A continuación se incluye un ejemplo un poco más completo en el que se muestra cómo utilizar la herencia en el caso de que el constructor de la clase padre reciba parámetros:

class Animal {
  nombre: string;
  constructor(nombre: string) { this.nombre = nombre; }
  mover(distancia: number = 0) {
    console.log(this.nombre +" se mueve "+ distancia +"m");
  }
}

class Serpiente extends Animal {
  constructor(nombre: string) { super(nombre); }
  mover(distancia = 5) {
    console.log("Reptando...");
    super.mover(distancia);
  }
}

let sam = new Serpiente("Sammy");
sam.mover();