Typescript Dia 1 - Empezando con Typescript

Video Guía

Vídeo 1: Typescript Dia 1- Empezando con Typescript

Hola a todos, como ya saben este es una serie sobre masterizando el Sharepoint Framework para esta ocasión nuestra serie número 2 se encargará de hablar sobre Typescript. Durante estos cursos o estos videos vamos a hablar de todos los fundamentos de Typescript y luego empezaremos a hacer cosas avanzadas como generics, conversión entre tipos, también es posible, y vamos a ver patrones de diseño de Typescript y podemos incluso llegar hasta la parte de programación orientada a objetos con Typescript.

Si ustedes ven algunos de los ejemplos hechos con Sharepoint Framework de los webparts que ya existen en el mercado, estos webparts no tienen programación orientada a objetos, simplemente intentan resolver un problema desde el punto de vista visual; un webpart que muestre un slider o un banner de imágenes, pero no utilizan las mejores prácticas de programación orientada a objetos o patrones de diseño, entonces al final de esta serie de vídeos sobre Typescript utilizaremos los patrones y las mejores prácticas de programación orientada a objetos.

Empecemos

¿Por qué Utilizar Typescript?

Uno de los principales problemas con Javascript, es que Javascript se puede sentir un poco desordenado y antes de continuar, algunos ustedes podrán notar que estas diapositivas son reutilizadas de otras presentaciones, esas otras presentaciones son públicas para las personas que tienen acceso a sitios como Pluralsight, desconozco si de pronto están publicadas en otros sitios, pero este curso digamos que toma las diapositivas de algunos cursos de Pluralsight por ejemplo

alt text

pero también utiliza ejemplos de otras fuentes, ejemplos propios. Uno de las principales fuentes es Jonh Papa y su repositorio de GitHub y el otro es Dan Wahlin y su repositorio en GitHub que entre los dos hicieron el curso de fundamentos de typescript en el cual basamos algunas de las diapositivas y algunos de los ejemplos. Para que sepan todo esto se puede reutilizar.

alt text

alt text

Ahora si continuemos un poco con el tema, entonces JavaScript se puede sentir un poco desordenado, para que usted en JavaScript pueda hacer un código como en CSharp por ejemplo con clases orientadas a objetos con namespaces realmente tiene que saber sobre patrónes de diseño en JavaScript, de lo contrario termina haciendo código de tipo spaguetti, pero eso no es lo que queremos.

Lo que queremos es obtener código que sea mantenible en el tiempo, código que cualquier desarrollador sepa Typescript o incluso que no sepa typescript sino cualquier lenguaje de programación pueda leerlo y entenderlo, incluso sin saber el lenguaje, eso es lo que queremos, queremos código que simplemente al abrir un archivo podamos saber dónde están las clases, las interfaces, los módulos, los namespaces y podamos de manera inmediata entender la estructura del código, no necesariamente entender el código que hace pero al menos entender la estructura, en los archivos de JavaScript eso es imposible porque hoy en día la mayoría de los desarrolladores escriben código de tipo spaguetti, simplemente son funciones una tras otra que se llaman desde el HTML.

Entonces qué es lo que hace, perdón antes de continuar…

Normalmente los desarrolladores de JavaScript, escribimos código de tipo spaguetti como lo decíamos en la diapositiva anterior, simplemente son funciones una tras otra que lo que hacen es resolver un problema por lo general de interface o de llamadas a servicios web o de cosas por el estilo, algunos desarrolladores más avanzados han logrado hacer namespaces y han logrado reorganizar con patrones de diseño de JavaScript para que ese código que era spaguetti ya no sea spaguetti sino tipo ravioli, es decir como separado por módulos. Este es un gran avance para las personas que lo hacen, pero es el porcentaje muy menor de los desarrolladores los que saben estos patrones de diseño y el esfuerzo es mucho mayor que si lo hacemos con Typescript.

¿Que nos provee JavaScript, Cuáles con las cosas buenas?

En JavaScript las variables pueden tener cualquier objeto así sea una cadena de caracteres, sea un número o una fecha, los tipos de esos objetos son determinados en el momento de su ejecución o en el momento en el que se le asignan un valor, yo podría decir Var x y asignarle un número, más adelante asignarle un String, más adelante asignarle una fecha. También algo de las cosas buenas es la conversión implícita de tipos es decir para pasar de un String a un number no hay que hacer un casting ni nada por el estilo.

¿Que es lo malo de JavaScript?

Que es muy difícil de asegurar que los tipos de datos son pasados entre funciones sin pruebas unitarias por lo tanto, muchos desarrolladores ni siquiera saben o utilizan el triple igual, para los que no saben, el triple igual es la manera en que JavaScript se valida no solamente el valor o se compara no solamente el valor sino el tipo de dato a ambos lados de la expresión, de esa manera se asegura que tanto el valor como el tipo son iguales y no muchos desarrolladores lo utilizan. Desarrollar aplicaciones para compañía ósea aplicaciones empresariales con JavaScript puede ser demasiado complejo porque estas pueden llegar a tener miles de línea de código por mantener.

¿Cuáles son las características de Typescript?

Entonces, primero que todo Typescript es un superset de JavaScript que compila o transpila dicen otras personas a simplemente JavaScript. Todos los archivos Typescript tiene la extensión .ts la cual es simplemente es una extensión para que los editores pueden validar los archivos Typescript como Visual Studio Code por ejemplo

alt text

pero los navegadores realmente ejecutan JavaScript, no ejecutan Typescript, para eso se utiliza un método que se llama el tsc, muchas personas dicen que es transpiling en vez de compiling, simplemente es una conversión del Typescript al JavaScript.

alt text

Typescript en mucho más flexible porque corre en cualquier navegador, es decir cuando compilamos de Typescript a JavaScript, corre automáticamente en cualquier navegador sin tener digamos que esforzamos por ejecutar o por realizar código dependiendo del navegador, que ese es uno de los problemas que se tiene hoy en día. Corre en cualquier host como node.js puede ser también internet information server, en sitios web en azure

alt text alt text alt text

Corre en cualquier sistema operativo, es OpenSource y tiene bastante soporte de herramientas, como por ejemplo Visual studio code, sublime, brackets

alt text

Todos ellos tienen sus plugins y sus linktics, un link es un validador de código para Typescript.

Características adicionales

En Typescript soporta código JavaScript, es decir yo puedo crear un archivo .ts y simplemente copiar código JavaScript, y a la hora de compilar lo que va a generar es código JavaScript, ese mismo código que copiamos, aunque no tiene sentido que lo hagamos de esa manera.
Provee tipos o tipificaciones estática es decir el valida, Typescript valida a la hora de compilar en la herramienta los tipos de datos en los parámetros, entonces si yo le asigno un String en un número me va a sacar un warning o un error.

Nos permite hacer encapsulación a través de clases y módulos, algo que en JavaScript es bastante complejo.
Soporta constructores, propiedades y funciones, nos permite definir interfaces que nuestras clases implementen esas interfaces. Tiene soporte de funciones lambda para los que somos desarrolladores de CSharp. NET, las funciones lambdas no son más que funciones anónimas, en Typescript también es permitido y obviamente dependiendo del editor de código que utilizamos tiene intellisense y chequeo de sintaxis.
El compilador de typescript es el tsc, el tsc se instala y lo único que se ejecuta es una línea que es tsc, el nombre del archivo.ts s y él nos genera el archivo .js.

alt text

Para nosotros que estamos viendo esto del SharePoint Framework no tenemos que preocuparnos obviamente cuando lleguemos al curso de SharePoint Framework, vamos a verlo en más detalle, pero digamos que el Turing que Microsoft creo para nosotros, todas esas tareas Gulp ya hacen eso por nosotros y no tenemos que preocuparnos por esa carpintería digámoslo así.
Entonces como les decía un Typescript se puede convertir en un JavaScript, se convierte con el transpilador, entonces en la parte izquierda tenemos una clase Greeter que tiene un constructor que recibe un mensaje de tipo String, como les decía una de las características de Typescript es que tiene Static typing, también tiene un campo en la parte superior en la primera línea y luego tiene simplemente una función.

alt text

Al convertirlo a JavaScript, entonces como pueden ver la clase Greeter se convierte simplemente en una función, lo que se llama un IFFI un (immediate invocation function) que después del navegador leer este JavaScript al final como tiene estos paréntesis lo va a invocar, va a ejecutarlo. Tenemos el constructor se ha convertido en una función que recibe un parámetro, en la función greet, se extiende con Greeter.prototype.greet es decir le estamos agregando un miembro a Greeter, y de esa función yo puedo utilizar, de esa forma yo puedo utilizar esta función greet dentro de las clases o los JavaScript que estén utilizando esta clases.

Keywords importantes y Operadores

alt text

Podemos crear clases

Las clases pueden tener constructores no son obligatorios
Podemos exportar un miembro de un módulo para que nuestras clases, nuestras funciones sean visibles desde afuera del archivo .ts hay que exportarlos
Podemos utilizar herencia con extends
Podemos utilizar interfaces, entonces al crear una interface, la clase que la utiliza tiene que utilizar la palabra clave implements
Podemos importar un módulo existente que hayamos desarrollado anteriormente
Podemos hacer contenedores para clases y otro código con el module y namespaces.
Algo excelente que tiene Typescript es que podemos cambiar la visibilidad de las clases con public y private.
Tenemos esta sintaxis con los tres puntos que es para parámetros tipo rest
Podemos utilizar sintaxis de tipo flecha para funciones anónimas
Podemos hacer casteo o conversiones entre tipos con el menor que y el mayor que y por ultimo podemos utilizar dos puntos como el separador entre el nombre de la variable y su respectivo tipo. Lo cual veremos más adelante.

¿Cuál es la jerarquía de un proyecto o clase en Typescript?

alt text

Primero las clases deben pertenecer a un módulo namespace, en el cual puedo crear muchas clases, las clases pueden implementar o no interfaces y dentro de las clases podemos utilizar campos, constructores, propiedades y funciones.
Bueno y ahora para empezar con un ejemplo muy sencillo, entonces en visual studio CODE tenemos una clase Car

alt text

La clase Car tiene un campo de tipo o de nombre engine o motor, aquí pueden ver los dos puntos de tipo string. Typescript siempre se separa las líneas con punto y coma lo cual es esencial. Tenemos un constructor que es con la palabra clave constructor, podemos tener constructores con parámetros y sin parámetros en este caso tenemos un constructor con un parámetro string que es un engine y luego le asignamos y en Typescript es obligatorio el this, this.engine al parámetro que nos llega al que este llamando esta clase este constructor, simplemente a esta variable o campo engine le vamos asignando lo que nos viene en el parámetro, luego tenemos una función start y una función stop, que son simplemente funciones, miren que no tienen la palabra clave function simplemente el nombre de la función y su implementación, como les decía el alert es algo de 100% de JavaScript, lo estamos aquí utilizando, entonces estamos combinando la sintaxis de typescript con JavaScript y luego simplemente utilizamos JavaScript para crear en la función de cuando se carga una variable de tipo carro, le mandamos el motor como un string y luego podemos iniciar y parar ese carro. Obviamente esto no funciona, no tenemos como un HTML asociado.
Yo lo que quería mostrarles es un ejemplo de sintaxis. Ahora que tenemos que hacer, tenemos que convertir ese archivo Typescript a un archivo JavaScript, para eso tenemos el tsc, tsc es el transpilador, entonces tsc hello world.ts

alt text

y eso nos crea al archivo .JavaScript. Revisemos que paso aquí….

Vamos a abrir este archivo en la terminal

alt text

Disculpa por los colores en este momento, pero simplemente quiero hacerlo rápido, hello world . ts

alt text

y eso me crea el archivo hello world . js

alt text

Que lo que hace es simplemente la conversión de Typescript a JavaScript,

alt text

Como pueden ver ustedes la clase no aparece por ningún lado porque no existe en JavaScript, simplemente una variable, es un immediate invoque function y para agregar métodos a esa clase se utiliza el .prototype. Ya de esta manera podríamos utilizar este .js en nuestra aplicación.

Esto ha sido todo por el primer vídeo espero que les haya gustado, es una introducción bastante básica, a medida que vamos avanzando, vamos ir profundizando mucho más y hasta la próxima ocasión