En este artículo vamos a resumir algunas de las cosas que verás de inicio en Ionic 2 y que seguro serán novedad para los lectores que no tienen demasiada experiencia en ES6 y TypeScript.

Lejos de querer ser una descripción exhaustiva de lo que viene con ES6 y TypeScript, pretende ayudar a las personas a que no se pierdan y comiencen a entender las nuevas reglas de sintaxis que usaremos en estos lenguajes.

Aunque sean cosas distintas, ES6 y TypeScript, las agrupamos en este mismo artículo porque el propio TypeScript es el que nos aporta la posibilidad de trabajar con ES6, gracias a su transpilador.

Transpilador de TypeScript

Aunque en el desarrollo con Ionic 2 no vamos a tener que trabajar directamente con el transpilador, sí conviene saber qué es y por qué se usa en Ionic.

Ionic 2 usa Angular y éste a su vez se escribe preferentemente con TypeScript. TypeScript es un Javascript pero con diversos añadidos para facilitar diversas tareas de los programadores, pero no es compatible con los navegadores actuales.

El transpilador hace las tareas de convertir el código TypeScript en código Javascript entendible por todos los navegadores (ES5). Por tanto, lo que ejecutará realmente el navegador es el código traducido. Transpilador es una conjunción de las palabras compilador y traductor y viene al caso porque realmente ese paso desde TypeScript hacia Javascript ES5 está a medio camino entre una compilación y una traducción.

TypeScript usa todo lo que viene ya como beneficio en la programación con ES6 y alguna cosa de ES7, por lo que realmente el código es prácticamente Javascript, pero en sus versiones más evolucionadas. En esa traducción el código ES6 también es convertido a código ES5, compatible con todos los browsers.

Lo que agrega principalmente TypeScript es el tipado de datos. Es decir, TypeScript permite crear variables donde indiquemos los tipos, de modo que no se le pueda cambiar el tipo a una variable accidentalmente durante la vida de esa variable. Esto nos permite que el editor de código nos alerte sobre fallos en la programación, en el mismo instante que estamos programando, así como nos ayude con el autocompletado de código.

Imports ES6

En TypeScript podemos acceder a ficheros de módulos externos gracias a los imports. Por cerrar el punto anterior, aunque como muchas otras cosas, los imports vienen de ES6, los podemos usar gracias al transpilador de TypeScript.

Usar los imports es sencillo. Simplemente tenemos que indicar qué cosa o cosas quieres traerte y del archivo donde están definidas.

En el código de un componente Ionic verás cosas como:

import { Component } from '@angular/core';

Eso quiere decir que estamos accediendo a un módulo llamado "@angular/core" y de ahí estamos trayendo la clase "Component".

O por ejemplo encuentras:

import { NavController } from 'ionic-angular';

Que indica que te estás trayendo la clase NavController del módulo 'ionic-angular'.

A la hora de hacer un import en esos dos ejemplos traíamos clases, pero en Javascript podemos importar cualquier cosa (funciones, variables, constantes, etc.) que haya sido exportada en un módulo.

Ya en el código del módulo que estamos importando, para definir lo que será visible (e importable) desde fuera se utiliza la palabra "export".

export class HomePage {
  //…
}

Así pues, desde un módulo exportas algo y, desde cualquier otro módulo donde quieras usarlo, tienes que realizar el correspondiente import.

Decoradores de TypeScript

Otra cosa que seguramente te llamará la atención son los decoradores, que fornan parte también del propio TypeScript. Los decoradores dan información sobre cómo se debe de comportar una clase.

Existen diversos tipos de decoradores y además pueden indicar diversos juegos de atributos.

Por ejemplo, este sería el decorador usado para la class "HomePage" que habíamos estado definiendo en el artículo del "Hola Mundo".

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

Depende de lo que sea que estamos creando, un tipe, un componente, una directiva, etc. debes asignar cosas distintas en él. En este caso estamos usando el decorador de componente "@Componet", porque realmente la página "home" se declara en base a un componente (como cualquier página de Ionic 2).

En el decorador estamos informando que el componente se va a llamar page-home" y que su archivo para la vista está en la ruta templateURL.

Clases de ES6 Hasta hace poco en Javascript no se podía usar clases, de objetos. Existían diversos mecanismos para suplir esta carencia, aunque ahora ya forman parte de Javascript, desde ES6.

Las clases tienen una sintaxis similar a otros lenguajes de programación. Por buenas prácticas, las clases se deberían crear en módulos independientes y su exportación debería realizarse para poder usarla en módulos ajenos al archivo donde se definió.

export class HomePage {
  // código de la clase
}

Una clase tiene sus miembros, como métodos y funciones y la manera de crearlos no dista mucho de la de otros lenguajes.

export class HomePage {
  propiedad = 3;
  metodo() {
    //código del método
  }
}

Tipos de datos en TypeScript

TypeScript permite asignar tipos a las variables que se están creando, tal como adelantamos anteriormente. Los tipos de las variables se le asignan con ":" y luego el tipo que se va a utilizar. Por ejemplo:

test:string = "Bienvenido a Ionic 2";

Se ha declarado una variable "test" con tipo de datos "string", en la que se asigna además una cadena de texto directamente. La novedad hasta ahora es la posibilidad de definir los tipos de manera estática, en el código, y no dinámica, deducida en el momento de la ejecución según se asignan valores a las variables.

Los tipos de datos posibles en TypeScript son los que ya existen en Javascript, y alguno adicional:

• Boolean
• Number
• String
• Array (vectores, arreglos matrices. Varios valores unidos en una variable y accesibles por un índice. Además, en los arrays podemos marcar que todas sus casillas sean de un mismo tipo)
• Tuplas y enumerados (que no vamos a ver todavía)
• Any (es un tipo de datos que acepta cualquier tipo, realmente este tipo de datos es el de las variables de Javascript, de tipado dinámico. En TypeScript si no indico tipos, se deduce que es un tipo "any")
• Void (vacío, nada. Usado para funciones que no devuelven valores)
• Null y Undefined (nulo o indefinido)

Es interesante ver cómo se declara un array en TypeScript.

var arrayDeNumeros: number[];

Puedo por supuesto colocarle ya valores al array.

var arrayDeCadenas: string[] =  ["hola", "desde", "typescript"];

Y también podría declarar un array sin indicar qué tipos de datos debe tener cada una de sus casillas de manera rígida.

var arrayDeCualquierCosa: any[] = [1, true, "yeah!"];

Además de todos estos tipos básicos, cuando creamos una clase de objetos con TypeScript estamos creando un tipo y por tanto podremos declarar variables que serán objetos de esa clase. TypeScript será capaz de comprobar que siempre que se asigne algo a esas variables sea del tipo dado, y el editor nos podrá ayudar con el intelisense.

Variables con let y constantes ES6

Otra de las cosas que tenemos disponibles y que merece la pena usar son las palabras clave "let" y "const", que agregan nuevas variantes y utilidades a la hora de definir el ámbito de las variables y la posibilidad de que muten a lo largo del tiempo.

Puedes obtener más información sobre éstas en el artículo Conociendo las variables en ECMAScript 2015.

Gracias a este punto, cabe decir que cualquiera de los arrays definidos en el paso anterior sería mejor declararlos con let, en el caso que se pueda por el ámbito que se le aplicaría.

let arrayDeNumeros: number[];

Conclusión

Hay muchas otras novedades que deberíamos comentar, pero con estas podremos dar los primeros pasos con Ionic 2 sin mayores problemas, incluso si estás acostumbrado a usar Javascript del antiguo (ES5).

En el siguiente artículo veremos una lista de conocimientos necesarios para las personas que no conocen antemano Angular en su versión 2 o superior.