Angular, Principios de Typescript Parte 5

Si has seguido mis tutoriales sobre Angular hasta aquí te darás cuenta que he tratado al máximo de evitar el uso de Typescript, de hecho si revisas directamente la documentación de Angular te darás cuenta que de la mayoría de la documentación esta hecha en Typescript. Esto se debe básicamente el equipo de Angular decidio crear Angular sobre TypesScript, TypeScript es una colaboración oficial entre Google y Microsoft con el fin de orientar completamente Javascript a Objetos.

Es decir que podamos usar con Javascript todo el “Paradigma de programación orientada a objetos”, como clases, constructores, métodos, Public, Private, Static, etc.

Que es TypeScript?

Podemos definir TypeScript como un transcopilador de Javascript (WTF?) Si un transcompilador básicamente TypeScript convierte el código TypeScript en código Javascript, sin embargo eso no es todo. Como te he contado en tutoriales pasados existen estándares de Javascript como ECMAScript 5 y ECMAScript 6, ECMAScript 5 es el estándar actual de Javascript que soportan la mayoría de los navegadores actuales, sin embargo ECMAScript 6 mejora el ECMAScript 5 con un montón de nuevas funcionalidades y no es soportado por muchos navegadores. Es por esto que TypeScript es un transcompilador de Javascript es decir que puede transformar tu código TypeScript en código Javascript compatible con ECMAScript 5 o ECMAScript 6.

Primeros pasos en con TypeScript

En este tutorial nos olvidaremos de Angular2 en si, y nos dedicaremos solo a TypeScript de manera independiente, por tanto nuestro primer paso consistirá en la instalación de TypeScript. Para ello vamos a ejecutar el siguiente comando (Recuerda tener instalado NodeJS).

1
npm install -g typescript

Hecho esto ya tenemos TypeScript en nuestro sistema, veamos ahora algunos ejemplos:

Variables y funciones Typadas

Simplemente puedes usar tipos de datos es decir

  • js
1
2
3
4
5
6
7
8
nombre:string = "Esto es un string";
edad:number = 43;
bandera: boolean = true;

//recibe un string como parámetro y retorna un string como resultado
function hola(nombre:string):string{
return "hola"+nombre;
}

Arreglos

  • js
1
2
Empresas: Array<string> = ['IBM', 'Microsoft', 'Google'];
Empresas: string[] = ['Apple', 'Dell', 'HP'];

Any

Puedes usar el tipo Any para ponerle un cualquier tipo a una variable, es como un comodin.

  • js
1
2
3
algunaCosa: any = 'as string';
algunaCosa = 1;
algunaCosa = [1, 2, 3];

Void

Puedes declarar métodos que no retornan nada.

  • js
1
2
3
function setNombre(nombre: string): void {
this.nombre = nombre;
}

Clases y Objetos

Podemos crear clases con atributos, métodos y constructores.

  • js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class persona {
nombre:string;
edad:number;
casado:boolean;
constructor(nombre:string, edad:number, casado:boolean){
this.nombre = nombre;
this.edad = edad;
this.casado = casado;
}
myMetodo():string{
return "Este metodo simplemente retorna un string";
}
}
persona = new Persona("juan",12,false);

Herencia

Si! Aunque no lo creas puedes usar herencia con TypeScript y es ridículamente fácil:

  • js
1
2
3
4
5
6
class Estudiante extends Persona {
universidad:string;
constructor(){
super();
}
}

Como usar TypeScript en mis proyectos?

Luego de haber instalado TypesScript debes crear tu archivo nombre.ts nota que termina en .ts porque es la notacion especifica de TypeScript. Una vez tengas esto tu puedes correr el comando

tsc nombre.ts

y veras que te creara un Archivo llamado nombre.js en la misma carpeta donde este tu archivo .ts, y es este archivo el que puede incluir en tus proyectos, independientemente que estés usando Angular2 o no. Otra caracteristica de TypeScript, es que como te dije puedes convertir tu codigo Javascript en ECMAScript 5 o ECMAScript 6, para ello puedes crear un un archivo tsconfig.json y jugar con las siguientes acciones:

    Si usas este archivo puede ejecutar simplemente el comando:

    1
    tsc

    Así el transformara todos los archivos con extensión .ts a .js sin necesidad de especificarle uno por uno. Y eso es todo, recuerda Este post hace parte de una serie de tutoriales sobre Angular. Aunque no vimos mucho sobre Angular en este Post te aseguro que estos principios nos serviran para continuar en el aprendizaje de Angular a continuación te dejo los links.

    Angular Parte 0

    Qué es AngularJS? Parte 1

    AngularJS vs Angular? Parte 2

    Hola Mundo con Angular Parte 3

    Angular aplicación que saluda Parte 4

    Si tienes alguna duda no dudes en dejarme un comentario en la parte de abajo, recuerda que si te gustó también puedes compartir usando los links a las redes sociales en la parte de abajo.

    Copyrights © 2018 Sebastian Gomez. All Rights Reserved.

    Sobre mí

    sebastianMi nombre es Sebastián Gómez, soy ingeniero de sistemas e Informática y Magister en Ingeniería de Sistemas de la Universidad Nacional de Colombia.

    Actualmente trabajo en Globant como Web UI Developer con énfasis en aplicaciones híbridas y cross compiladas. Soy el organizador del Google Developers Group de Medellín, así que contactame si quieres dar alguna charla o participar actuamente de esta comunidad.

    He participado en una Startup Colombiana llamada SponzorMe al lado de Carlos Rojas y fuí participante de Startup Chile a pesar de no haber continuado con esta startup me apasiona el emprendimiento y me gusta aconsejar y ayudar startups como mentor técnico. También he trabajado en empresas Americanas como StudioHyperset en Estados Unidos y para Measured Medium. Mi interés y mi experiencia es el desarrollo de web y móvil full stack como Front-end con Javascript. Me apasiona desarrollar software, escribir código y enseñar lo que aprendo día a día.

    También he trabajado como profesor en diferentes universidades en Medellín Colombia, con tematicas relacionadas con la Inteligencia Artificial, Bases de datos, programación orientada a objetos, minería de datos, desarrollo de software, desarrollo móvil y desarrollo web.

    Me encanta escribir código rápido y prototipar de una manera accelerada si quieres ver que hago día a día puedes darle un vistazo a mi codepen:  https://codepen.io/seagomezar/.

    Todos los días trato de crear o participar en proyectos, la mayoría open source, así que puede chequear mi GitHub:  https://github.com/seagomezar.

    Mi áreas de investigación académica son: Ingeniería de software, Ingeniería de requisitos, procesamiento del lenguaje natural, Ontologías, Bases De Datos,  Machine Learning, Seguimiento de trayectorias y Modelamiento matemático de formaciones.

    Estas son algunas de mis publicaciones académicas mas recientes: