Saltar al contenido

Clases en #TypeScript

TypeScript
TypeScript

TypeScript

Una de las cosas que muchos programadores de C# y de Java, o incluso de Python echan de menos en Javascript son … las clases (como tal). Pues bien, TypeScript sí que tiene clases que facilitan la encapsulación de código. Utilizar las clases de Typescript es una magnífica manera de extender la programación orientada a objetos al desarrollar programas en Javascript.

Using TypeScript to create classes is a powerful way to extend object-oriented programming when creating JavaScript programs

Esta visión está más cercana a la programación orientada a objetos clásica, y no la forma un tanto especial de Javascript. Empezamos por aprender cómo podemos organizar el código en un proyecto de TypeScript, en concreto, por los módulos.

Módulos en TypeScript

Los módulos permiten organizar los proyectos, incluyendo dentroclases (y todo lo que estas conllevan) y funciones, separadas o todo junto.

TypeScript modules

TypeScript modules

Como puedes ver, son bastante flexibles. Las funciones ya las vimos antes.

Clases en TypeScript

Las clases permiten organizar las cosas, en este caso, los proyectos (partiendo de la base, que estamos ante grandes proyectos, je je !!). Este aspecto, la organización de código, no es uno de los puntos fuertes de Javascript, que está más basado en patrones, esto es, algo recomendado (o no recomendado).

Se podría decir que las clases son pequeños contenedores donde hay campos, contructor, propiedades y funciones.

  • Contructor es la forma de inicializar un objeto
  • Los campos son las variables que están incluidas dentro de la clase.
  • A través de las propiedades se acceden a las variables
  • Las funciones son las que ofrecen funcionalidad a la clase, utilizando parámetros (si procede) para trabajar con los valores de la clase.
TypeScript class example

TypeScript class example

Aunque en la anterior imagen no viene, las propiedades pueden establecerse con get y set, lo que facilita la transferencia de valores hacia y desde las clases con un mayor control.

Campos privados

El hecho de que las clases permitan tener propiedades privadas (private) es otra de las características de TypeScript. Aquí tienes un ejemplo de función que no compilará (pruebalo en TypeScript Playground):


class Greeter {
private _mensaje: string;
constructor(mens: string) {
this._mensaje = mens;
}
get mensaje(): string {
return "Hola " + this._mensaje;
}
}

var greeter = new Greeter("world");

var button = document.createElement('button');
button.textContent = 'TEST: ' + greeter._mensaje;
button.onclick = function() {
alert(greeter.mensaje);
};

document.body.appendChild(button);

Para que funcione (y se compile a Javascript), debes quitar private. De esta forma, tenemos muchas herramientas para el control de los datos por parte de las clases, frente a la flexibilidad de Javascript.

Clases estáticas

Una de las palabras claves usadas en las clases de TypeScript es static, lo que significa que puede ser llamada desde fuera de la clase, sin tener operativa dicha clase. La mayor utilidad que yo le veo es para crear una clase con constantes y variables. El mayor inconveniente de este tipo de propiedades es que necesitas un navegador con EMACScript 5 al menos.

Para probar esto de las clases con métodos estáticos, aquí tienes un pequeño código que puedes probar en TypeScript Playground para que veas como funciona:


class test {
static get CONSTANT(): string { return 'static "test"';}
}
document.body.innerHTML = test.CONSTANT;

Compilación a Javascript

A pesar de que las diferencias entre Javascript y TypeScript empiezan a ser bastante significativas, no debemos olvidar nunca que todas las clases y módulos que escribimos en TypeScript serán trasladados como módulos de Javascript, y que la organización será diferente. Por suerte para los que vienen de C# o Java, TypeScript les resultará más familiar erespecto de la organización que Javascript (si, y quizás por esa rareza de Javascript, es por lo que lo odio profundamente).

Quizás, el hecho de que odie tanto Javascript y lo bien estudiado que está TypeScript es lo que me puede facilitar la vida (programando).

Happy coding!

Manejando Datos Newsletter

Noticias, entradas, eventos, cursos, … News, entrances, events, courses, …


Gracias por unirte a la newsletter. Thanks for joining the newsletter.