[:es]Cada día más y más desarrolladores optan por elegir JavaScript como su lenguaje o uno de sus lenguajes de programación favoritos. De la misma manera, un incontable número de frameworks y librerías aparecen día a día. Y es que hace mucho JavaScript dejó de utilizarse solamente para validaciones y animaciones en el navegador, siendo actualmente uno de los principales lenguajes para aplicaciones completas, robustas y ligeras tanto en front-end como en back-end.

Pero no todo es color de rosa con JavaScript, las diversas formas de programar, los patrones de diseño que permite y su tipado blando, se pueden convertir en un verdadero problema cuando no se utilizan de una manera correcta. La solución a este problema viene por parte Microsoft con el superset TypeScript, que junto al tipado y otras características, está tomando bastante fuerza entre los desarrolladores JavaScript.

 

¿Que es TypeScript?

TypeScript es un superset de JavaScript, es decir, tiene todas las funcionalidades de JavaScript y además incorpora una capa de funcionalidades adicionales.

Y como dice Bill Wagner en su artículo Mejora tu inversión en JavaScript con TypeScript, ‘Si usas JavaScript, ya escribes en TypeScript’ pero ‘Esto no quiere decir que escribas bien en TypeScript y aproveches todas sus características’.

 

¿Desaparece la flexibilidad?

Pues no. Como lo mencionamos se agrega una capa de características y funcionalidades, pero se mantiene la flexibilidad de JavaScript. Tanto es así que si escribimos código en el estándar JavaScript ES6(ECMAScript6), ES5 o TypeScript el compilador lo entenderá y lo pasará todo a ES5 el cual es entendido por los browser actuales.

 

Características principales.

Variables Tipadas

La principal característica de TypeScript es que nos permite definir el tipo de las variables que vamos a usar. Podemos usar los tipos de variables básicos (Boolean, Number, String, Any, Array, Tuple, Void, Null, Undefined) o crear clases y declarar objetos de estas clases.

En el siguiente ejemplo se muestra el uso de variables tipadas en una función pero se han introducido dos errores para observar la utilidad de usar tipado.

class MyClass{
  myArray:Array<number>;
  constructor(someArg:string){
    this.myArray = someArg;
  }
  someMethod(){
    for(let item of this.myArray){
      console.log(item);
    }
  }
}

let someVar:number = 123456;
let myClassInstance:MyClass = new MyClass(someVar);
myClassInstance.someMethod();

En el ejemplo anterior recibo 2 errores en tiempo de compilación:

• En primer lugar, me dirá que le estoy intentando asignar un string a un array (primer error introducido a propósito en el constructor)
• En segundo lugar, me dice que no puedo pasar someVar al constructor de MyClass, porque NO es del tipo esperado.

Datos públicos y privados en una clase

En TypeScript podemos definir si una variable es pública o privada, en el caso de ser privada no se puede acceder directamente a esta variable fuera de la clase en la que fué declarada.

Decorators

La otra característica principal de TypeScript es el patrón de diseño Decorator que sirve para añadir funcionalidad a un objeto de forma dinámica. Los decoradores se pueden utilizar antes de declarar una clase, propiedad, método o parámetro, y utilizan la sintaxis @myDecorator(args) como lo veremos a continuación.

@SomeClassDecorator(/*some parameters*/)
class MyDecoratedClass {

  @SomePropertyDecorator()
  myDecoratedProperty: string;

  @SomeMethodDecorator()
  myDecoratedMethod(@myParamDecorator() decoratedParam: number) {
  }
}

Un ejemplo del uso de Decorators con TypeScript se da en Angular al declarar un componente:

@Component({
  selector: 'example-component',
  template: '<div>Woo a component!</div>'
})

export class ExampleComponent {
  constructor() {
    console.log('Hey I am a component!');
  }
}

Inyección de dependencias

La inyección de dependencias es mucho más sencilla usando TypeScript que en ES6 como lo veremos a continuación con un ejemplo en Angular.

Con ES6:

import {UserService} from './user.service';

export class AnotherService {
  constructor(userService) {
    this.userService = userService;
  }
}

AnotherService.parameters = [[UserService]];

Con TypeScript

import {UserService} from './user.service';

export class AnotherService {
  constructor(private userService:UserService) {}
}

 

Conclusión

Las características mencionadas a lo largo de este artículo, más muchas otras más que posee TypeScript, lo hacen un lenguaje ordenado y que provee características que nos ayudarán entre otras cosas a detectar errores de manera temprana en tiempo de compilación, simplificar el código con los decorators e inyección de dependencias, y, sobre todo si se lo usa de forma adecuada nos ayudará a solventar problemas de escalabilidad y mantenibilidad del código.

Referencias:

https://www.typescriptlang.org/docs/handbook/basic-types.html

https://bloginspanish.wordpress.com/tag/typescript/

https://www.mmfilesi.com/blog/typescript-1-introduccion/

http://blog.enriqueoriol.com/2016/06/angular2-aprendo-es6-o-typescript.html

 [:]