[Article] Visual Studio Code | Tips 3

Como vimos en el post anterior, Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. En este post vamos a ver mas funcionalidades de la herramienta que no ayudaran con nuestro código.

EDITING HACKS

La herramienta posee un gran cantidad de funciones dentro del editor de texto que hace que sea más sencillo y rápido editar mientras estamos desarrollando. Veremos algunas de ellas.

Selección Múltiple

Si queremos editar varios valores que pertenecen a una columna debemos presionar Alt + Click seleccionado el lugar donde queremos comenzar. Luego presionando Ctrl + Alt  + Up o Down seleccione la filas.

Podemos seleccionar una secuendi de tag para editarlos. Seleccionaremos el tag y presionamos Ctrl + D hasta el tag final.

Siempre seleccionamos por filas para editar y cuando debemos modificar una columna debemos ir fila por fila para poder editarlo. Ya no es necesarios. La edición de columnas nos ayudará con este problema. Debemos mantener presionado Shift + Alt y arrastre el cursor para seleccionar las columnas.

Copiar Filas

Cuando copiamos filas la ejecución clásica es: primero, seleccionar filas, luego presionar Ctrl + C, bajar una fila y presionar Ctrl + V. Con Shift + Alt + Up y Shift + Alt + Down podemos hacer lo mismo copiando hacia arriba o hacia abajo la fila en la cual estamos posicionados.

Mover Filas

De la misma forma que duplicamos filas, podemos mover bloque de código hacia arriba o hacia abajo. En caso de ser html respetará los tags. Si solo estamos ubicados en una línea moverá solamente esa línea

Formateo Automático de Código

Supongamos que tenemos una persona en el equipo desordenada. Escribe su código sin respetar el formato del código que está haciendo. Para ordenarlo podemos seleccionar el código y presionar Ctrl +K + F.

Ventana rápida de referencias

Seleccionaremos un objeto, luego presionamos Shift + F12, se abrirá una ventana donde podemos ver el listado de archivo junto al código de donde ese objeto está siendo referenciado.

Para buscar todas las referencias debemos presionar Shift + Alt + F12.

Renombrado de Símbolos

Imaginemos que declaramos un objeto con un nombre erróneo y ese objeto fue utilizado en un gran cantidad de sitios. ¿Estamos perdidos? No! podemos seleccionar el símbolo, presionar F2 y cambiar el nombre. Automaticamente se abrira todos los archivos los cuales fueron afectados por el cambio.

[Article] Visual Studio Code | Tips 1

Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. Desde su lanzamiento en el 2015, hasta estos días, ha tenido una evolución constante con grandes mejoras y muchas nuevas funcionalidades con cada nueva versión. A pesar de ser una herramienta bastante joven, ha escalado hasta el primer puesto entre los IDE de código fuente livianos del mercado. En esta serie de publicaciones vamos a ver algunos trucos, funcionalidades y plugins que podemos encontrar en esta fabulosa herramienta, como también, cómo nos ayudará a agilizar nuestra escritura de código, como también, optimizar nuestros tiempos..

Les dejo el link de descarga https://code.visualstudio.com/

Themes

Una de las funcionalidades que pocos conocen es la de los temas.  Visual Studio Code viene con varios temas para seleccionar que podemos elegir según a nuestro gusto. Para esto presionamos <F1> , tipeamos theme, presionamos <enter>, por último, seleccionaremos Preferences: Color Theme. Esto nos mostrará el listado de temas disponibles.

Podemos seleccionar el que más nos guste de la lista o bien agregar más temas si lo deseamos. Ingresamos nuevamente a la lista y elegimos la opción Install Additional Color Themes. Esto nos llevará a una lista descargable para seleccionar el que deseemos.

Iconos por tipo de archivo

Cada vez que creamos un archivo nuevo, Visual Studio Code, reconocerá la extensión y nos mostrará el icono relacionado con ese tipo de archivo. Posee una gran cantidad de iconos. Tenemos disponibles para casi todos  de los lenguajes más utilizados en el mercado.

Font Ligatures

Esta funcionalidad básicamente une algunos símbolos en un solo . Hace que la lectura de código sea más fácil del código y legible. Por ejemplo, si tenemos que escribir === será transformado a ☰. Parece ser más sencillo y natural de leer.  Otro ejemplo, si queremos hacer una arrow function, =>, sera cambiado por el símbolo ⇒.

Para tener disponible esta característica, lo primero que debemos hacer es descargar e instalar la fuente Fira Code. Les dejo el link para que lo descarguen.

https://github.com/tonsky/FiraCode#solution

Lo segundo que debemos hacer es agregar a la familia de fuentes la fuente Fira Code desde la configuración de VS Code. Presionamos <F1>, tepeamos User Setting, buscaremos en  la configuración a editar fontFamily y le agregamos Fira Code. Luego buscamos  fontLigatures y la activamos, esta funcionalidad viene desactivada por default.

Playground

Supongamos que queremos ver todos los features que posee Visual Studio Code. La manera de hacerlo es ingresando a la barra de comandos con <F1> y escribimos Playground. Seleccionamos Help: Interactive Playground. Esto nos mostrará todo el listado completo.

Panels

La funcionalidad de múltiples editores nos ayudará a tener varios archivos al mismo tiempo y poder visualizarlos de una forma simple. Por ejemplo, en angular, casi siempre tengo 2 archivos abiertos, el componente y la vista. Tenemos 2 maneras de dividirlo, la primera es por el icono que se encuentra arriba a la derecha. La segunda opción es por medio de Ctrl + \. Podemos dividir en la cantidad de columnas que deseemos.

Otra funcionalidad es la Grilla 2×2. Esta podemos activarla desde el menú View – Editor Layout – Grid (2×2). Nos dividirá la pantalla en 4 permitiendo visualizar 4 archivos al mismo tiempo.

Zen Mode

Trabajamos en pantalla completa!!!. Al activar ZenMode el Visual Studio Code ocultara todo, todas las barras y menús, se ampliará a todo nuestro screen permitiendo hacer foto 100% en lo que estamos trabajando.

Conclusión

Visual Studio Code se ha vuelto una poderosa herramienta para desarrolladores que podemos usar con la gran  mayoría de los lenguajes. En próximos post veremos más características de la herramienta.

[Tutorial] Javascript | TypeScript – Parte 8

En esta octava entrega continuaremos con nuestro demo de TypeScript junto a Jquery. Recordemos que utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. En nuestro post anterior habíamos dejado todo listo para comenzar nuestra aplicación.

Objetivo

En esta octava entrega continuaremos con nuestro demo de TypeScript junto a Jquery. Recordemos que utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. En nuestro post anterior habíamos dejado todo listo para comenzar nuestra aplicación.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Nuestra aplicación tendrá unas funcionalidades bastantes simples. Sera un ABM de clientes los cuales consumen servicios rest para almacenar y actualizar la información. No voy a entrar en detalle de la interfaz gráfica. Usaremos AdminLTE que está basada en Bootstrap como interfaz gráfica. Les dejare el demo completo en github para que puedan consultarlo cuando lo necesiten.

Crearemos un carpeta que se llame customers. Dentro tendremos la página web inicio de nuestro ABM que se llamara customer-index.html.

Crearemos otra carpeta llamada src donde tendremos el archivo app.ts que creamos en el post anterior. Agregaremos: customers.ts, customerTypes.ts y GenericRepository.ts.

En nuestro archivo customer-index.html deberemos agregar una línea que código la cual ara referencia a bundle creado por webpack y que es el que realmente ejecutará nuestra aplicación.

&lt;script src="/dist/app.js"&gt;&lt;/script&gt;

Empezaremos por nuestro archivo GenericRepository.ts. Este archivo contendrá un interface junto a un clase repositorio. Esta clase repositorio la utilizaremos como clase genérica para cualquier acceso a datos que necesitemos. Veamos el código:

import * as $ from 'jquery'

export interface IRepository&lt;T&gt;{
GetAll(): JQueryPromise&lt; Array&lt;T&gt; &gt;;
GetById(id: number): JQueryPromise&lt;T&gt;;
Delete(id: number) : JQueryPromise&lt;void&gt;;
Save(entity: T) : JQueryPromise&lt;T&gt;;
Update(id:number, entity: T) : JQueryPromise&lt;void&gt;;
}

export class Repository&lt;T&gt; implements IRepository&lt;T&gt;{

constructor(public serviceUrl: string){}

getServiceUrl():string {
return this.serviceUrl;
}

GetById(id: number): JQueryPromise&lt;T&gt; {
return &lt;JQueryPromise&lt;T&gt;&gt;$.ajax({
type: "GET",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl + "/" + id
});
}
GetAll(): JQueryPromise&lt; Array&lt;T&gt; &gt; {
$.support.cors=true;
return &lt;JQueryPromise&lt;Array&lt;T&gt;&gt;&gt;$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl
});
}

Delete(id: number): JQueryPromise&lt;void&gt; {
return &lt;JQueryPromise&lt;void&gt;&gt;$.ajax({
type: "DELETE",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl + "/" + id
});
}
Save(entity: T): JQueryPromise&lt;T&gt;{

return &lt;JQueryPromise&lt;T&gt;&gt;$.ajax({
type: "POST",
url: this.serviceUrl,
data: JSON.stringify(entity),
contentType: "application/json; charset=utf-8",
dataType: 'json'
});
}

Update(id:number, entity: T): JQueryPromise&lt;void&gt; {
return &lt;JQueryPromise&lt;void&gt;&gt;$.ajax({
type: "PUT",
url: this.serviceUrl + "/" + id ,
data: JSON.stringify(entity),
contentType: "application/json; charset=utf-8",
dataType: 'json'
});
}
};

La primera línea que podemos ver es muy importante. Esta línea hace que podamos importar y tener disponible JQuery. Automáticamente como instalamos el archivo de tipos específicos para JQuery tendremos intellisense disponible:

La segunda línea también muy importante importara nuestra clase base repository para que podamos extenderlas en nuestras clases de negocio.

En nuestra interface Repository declaramos los métodos básicos y necesarios de cualquier Repositorio con una base de tipos de Datos genéricos que podemos ver representado por <T>. Este contrato obligará a las clases que lo implementen tengan estos métodos.

Más adelante, en el mismo archivo, podemos ver la implementación de nuestra interface en una clase también genérica llamada Repository. Esta clase implementa los métodos y la funcionalidad de nuestro repositorio. Veamos el método GetByID.

En este método o como el de los demás podemos ver que el método devolverá un JQueryPromise genérico como también que está usando el método de Jquery $.ajax. El cual es encargado de invocar los servicios Rest.

Dentro de nuestro archivo customer.ts implementaremos nuestra clase RepositoryCustomers la cual extenderá Repository<T>. Aqui esta la clase completa

import * as $ from 'jquery'
import { Repository } from './GenericRepository'

export class ModelCustomer {
customerId: number;
firstName: string;
middleName: string;
surName: string;
emailAddress: string;
customerTypeId: number;
notes: string;
}

export class ModelPageCustomer {
countPages: number;
countCustomers: number;
actualPage : number;
customers : Array&lt;ModelCustomer&gt;;
}

export class RepositoryCustomers extends Repository&lt;ModelCustomer&gt;{

constructor(){
super("http://localhost:8044/api/customers");
}

GetPage(page: number): JQueryPromise&lt; ModelPageCustomer &gt; {

return &lt;JQueryPromise&lt;ModelPageCustomer&gt;&gt;$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
url: super.getServiceUrl() + "/" + page + "/30"
});
}
}

Podemos ver en nuestra archivo 2 clases mas: ModelCustomer y ModelPageCustomer. La primera es un modelo para nuestros datos de clientes y la segunda es un modelo para paginar en nuestra vista de listado.

En el archivo customerTypes.ts tendremos una implementación similar, pero, para los tipos de nuestros clientes. La clase RepositoryCustomersTypes igualmente que nuestra clase anterior extenderá Repository<T> pero para el modelo ModelCustomerType.

Por último veamos nuestro archivo app.ts. En este archivo tendremos la implementación de las funcionalidades de nuestra interfaz gráfica. Está funcionalidades consumen nuestros repositorios. Lo más importantes son las 3 primeras líneas.


import { RepositoryCustomers, ModelCustomer, ModelPageCustomer } from './customers';
import { RepositoryCustomersTypes, ModelCustomerType } from './customersTypes';
import * as $ from 'jquery';

En estas líneas importamos todo lo necesario para nuestra vista y sus funcionalidades.

Conclusión

En este post hemos visto un acercamiento al demo hecho en javascript. Pueden descargar el proyecto desde la dirección de github https://github.com/withoutdebugger/DemoTypeScript. En el próximos post tocaremos algunos temas más complejos de que podemos desarrollar con TypeScript.

[Tutorial] Javascript | TypeScript – Parte 7

En esta séptima entrega veremos un ejemplo del uso de TypeScript junto a Jquery. Utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. Estos servicios lo usaremos de repositorio de información.

Objetivo

En esta séptima entrega veremos un ejemplo del uso de TypeScript junto a Jquery. Utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. Estos servicios lo usaremos de repositorio de información.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Para comenzar vamos a configurar nuestra aplicación con todo lo que necesitamos para el demo. Primero creamos una carpeta, en mi caso la nombraré DemoTypeScript, pero pueden ponerle el nombre que deseen. Luego abriremos la carpeta con visual code.

Una vez abierto ejecutaremos en la consola de VS Code el primero comentado que inicializará el archivo necesario para npm.

npm init

El siguiente comando que ejecutaremos instalará TypeScript y ts-loader. El ts-loader lo usaremos junto a webpack que será instalado más adelante.

npm install --save-dev typescript ts-loader

Le toca a Jquery.

npm install --save-dev jquery

Antes de seguir con los comandos vamos a tocar un tema que habíamos dejamos pendiente y es “Typings”. En nuestro ejemplo queremos usar JQuery, pero tenemos un problema, este no fue hecho con TypeScript. Entonces ¿Cómo podemos tener soportes de tipos usando esta librería?.

Para esto existen Type Script Definitions Files. Estos archivos con la extensión d.ts describen los métodos, tipos y objetos de las librerías que no fueron hechas con TypeScript brindándonos el soporte de tipos. Estos archivos los utilizará el compilador para validar tipos y en el caso los programas, como VS Code, la intellisense en tiempo de desarrollo.

Veamos los pasos para instalar Typings. Debemos instalarlo en nuestro proyecto por medio de comandos npm.

npm install --save-dev typings

Una vez que tenemos instalado el soporte de typings debemos descargar e instalar el soporte para jquery de la siguiente forma:

typings install dt~jquery --global --save

Esto nos creara en nuestro proyecto una carpeta llamada typing que en su interior tendrá los archivos necesarios.

Lo siguiente en la lista es instalar es Webpack. Webpack es una herramienta que nos ayudará a transpilar nuestro codigo TypeScript de una manera más sencilla. Posee muchísimas funciones, pero por este momento, solo utilizaremos la capacidad de generar bundles a partir de nuestro código. Lo instalaremos con el siguiente comando npm:

npm install --save-dev webpack

Empecemos con las configuraciones. Primero creamos el archivo config.json con el siguiente comando:

tsc -init

Lo siguiente es crear una carpeta que llamaremos src que contendrá nuestro código y dentro un archivo que se llamará app.ts el cual será el inicio de nuestra aplicación. Para que TypeScript reconozcas los tipos configurado en el archivo d.ts correspondiente a JQuery debemos agregar las siguientes líneas:

"files": [
"typings/index.d.ts",
"src/app.ts"
]

El archivo index.d.ts le indicara de donde debe tomar los tipos y app.ts le dirá dónde debe iniciar nuestra aplicación. Nuestro archivo tsconfig.json quedara algo asi:

{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"outDir": "./dist",
"strict": true
}
,
"files": [
"typings/index.d.ts",
"src/app.ts"

]
}

Nos queda solo agregar el archivo de configuración para Webpack. Crearemos un archivo webpack.config.js y le agregaremos el siguiente contenido:


var path = require('path');
var webpack = require('webpack');

module.exports = {

devtool: 'source-map',
entry: ['./src/app.ts'],
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module:{
loaders:[
{
test: /\.ts$/,
include: path.resolve(__dirname, 'src'),
loader: 'ts-loader'
}]
},
resolve:{
extensions: [".webpack.js",".web.js", ".ts", ".js"]
}
};

Para comprobar que todo funciona correctamente completaremos nuestro archivo app.ts que se encuentra en la carpeta src con el siguiente código:

class Main{
mySite:string = "http://www.withoutdebugger.com";
}

Iremos a nuestra consola y ejecutaremos el siguiente comando:

node_modules\.bin\webpack

Ahora podemos ver una nueva carpeta con el archivo final de nuestra aplicación.

Por último instalaremos un servidor web liviano hecho en nodejs.

npm install http-server

Y podemos invocarlos desde la consola de VSCode simplemente con el comando:

http-server

Conclusión

En este post hemos configurado todo lo necesario para comenzar nuestra aplicación demo. En el próximo post entramos ya en nuestra aplicación demo.

[Tutorial] Javascript | TypeScript – Parte 6

En esta sexto post tocaremos los temas: namespaces, módulos y decoradores, como se usan en TypeScript, que no brinda para trabajar con ellos y que beneficios tienen. Nuevamente utilizaremos VS Code en algunos ejemplos.

Objetivo

En esta sexto post tocaremos los temas: namespaces, módulos y decoradores, como se usan en TypeScript, que nos brinda para trabajar con ellos y que beneficios tienen. Nuevamente utilizaremos VS Code en algunos ejemplos.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Namespaces

Muchos lenguajes de programación como C#, Java y TypeScript nos brindan una forma de organizar nuestro codigo por medio de Namespaces. Usaremos estos namespaces para agrupar funcionalidades similares.

Supongamos que tenemos varias clases validadoras como en el ejemplo:

interface StringValidator {
isAcceptable(s: string): boolean;
}

let lettersRegexp = /^[A-Za-z]+$/;
let numberRegexp = /^[0-9]+$/;

class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}

class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 &amp;&amp; numberRegexp.test(s);
}
}

A medida que nuestra aplicación crezca tal vez es necesario agregar más validadores. Es un buena práctica tener nuestros validadores organizados en un Namespace. Por ahora, no le prestemos atención a la palabra export lo veremos más adelante.

namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}

const lettersRegexp = /^[A-Za-z]+$/;
const numberRegexp = /^[0-9]+$/;

export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}

export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 &amp;&amp; numberRegexp.test(s);
}
}
}

Supongamos que no queremos hacer que todas nuestras validaciones estén el mismo archivo. TypeScript nos permite separarlos y hacer referencia al archivo donde se encuentra el namespace base

Validation.ts

namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
}

LettersOnlyValidator.ts

/// &lt;reference path="Validation.ts" /&gt;
namespace Validation {
const lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
}

ZipCodeValidator.ts

/// &lt;reference path="Validation.ts" /&gt;
namespace Validation {
const numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 &amp;&amp; numberRegexp.test(s);
}
}
}

TestExamaple.ts

/// &lt;reference path="Validation.ts" /&gt;
/// &lt;reference path="LettersOnlyValidator.ts" /&gt;
/// &lt;reference path="ZipCodeValidator.ts" /&gt;

let strings = ["Hello", "98052", "101"];

let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

for (let s of strings) {
for (let name in validators) {
console.log(""" + s + "" " + (validators[name].isAcceptable(s) ? " matches " : " does not match ") + name);
}
}

Módulos

Cada módulo tiene su propio ámbito, esto significa que todo su contenido, clases, variables, funciones, etc declaradas dentro no serán visibles al menos que se exporten. Es aquí la importancia de la palabra export, export dará visibilidad a las clases que quieran usarla  y para ser usados deben ser importados.

Los módulos pueden importarse entre sí por medio de un cargador de módulos. En nuestro caso estamos usando CommonJS pero podemos utilizar cualquier otro. Veamos un ejemplo supongamos que tenemos una clase que era un módulo:

customer.ts

class Customer{

let name: string;
GetName(){
return name;
}
}

export { Customer };

Simplemente por tener la palabra export ya se convertirá en un módulo. Export está diciendo que Customar podrá ser consumida o utilizada fuera del ámbito del propio módulo.

Para no exponer el nombre original podemos exportarlo como un alias de la siguiente manera:

export { Customer as PrincipalCustomer };

Ahora para utilizar en nuestra app el módulo Customer debemos importarlo de esta manera:

import{ Customer} from "./customer";

let myCustomer = new Customer();

Muchos pensaran “le fatla e .ts”. No es necesario ya que por default sabrá que se refiere a ese tipo de extensión. Supongamos que nuestro módulo posee más de una clase, y queremos importarlo en una variable

import * as list from "./customer";

let myCustomer = new list.Customer();

Una buena opción es exportarlo por default, cada módulo puede tener una y solo una exportación por default.

customer.ts

class Customer{
...
}

export default Customer;

app.ts

import Customer from "./customer";
let myCustomer = new Customer();

Realmente el uso de módulos es bastante sencillo. El tema es más extenso pero con esto nos alcanza para tener un excelente punto de partida.

Decoradores

Los decoradores vienen de Angular (2) y fueron solicitados por el equipo de Google. Si, aunque no lo crean, el equipo de Microsoft y el equipo de Google trabajaron juntos para poder implementarlo en TypeScript.

Antes que nada, para poder hacer uso de los decorator, debemos cambiar una configuración en nuestro tsconfig y agregar lo lo siguiente.

{
"compilerOptions": {
"target": "es5",  'ESNEXT'. */
"module": "commonjs",
"experimentalDecorators": true
}
}

aunque suene raro que diga experimental, en muchos lugares ya se usa en produccion asi que no debemos preocuparnos por esto.

Un decorador es un tipo especial de declaración que adjunta metadata o añadir una cierta característica que no deberían cambiar el comportamiento a una clase, método, propiedades o parámetros.

Para hacer un decorator debemos cumplir algunas especificaciones dependiendo de a cual queramos afectar.

type ClassDecorator = &lt;Function extends Function&gt;(target: TFunction: TFunction | void;
type MethodDecorator = &lt;T&gt;(target: Object, propertyKey: string | symbol, descriptor: TypedPrpoertyDescriptor&lt;T&gt;): void;
Type PropertyDecorator = (target: Object, propertyKey: string | symbol): void;
Type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number): void;

Para mejor su funcionamiento vamos a hacer un ejemplo donde tendremos una clase log que irá registrando el comportamiento de una clase.

function logClass(constructor: Function){
console.log(Date.now() + " - LogClass......: " + constructor["name"]);
}

function logMethod(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor&lt;T&gt;):void{
console.log(Date.now() + " - LogMethod.....: " + propertyKey.toString());
}

function logParameter(target: Object, propertyKey: string | symbol, parameterIndex: number):void{
console.log(Date.now() + " - LogParamter...: " + propertyKey.toString());
}

Lo que podemos ver en nuestra clase es que tenemos 3 funciones: una para class, otra para un method y por último para un parámetros. Ahora veamos cómo se vería nuestra clase decorada:

@logClass
class Calculadora{

constructor(){}

@logMethod
Sumar(arg1: number, @logParameter arg2: number){
return arg1 + arg2;
}

}

let calc = new Calculadora();
console.log(calc.Sumar(1,2));

El símbolo @ le dirá compilador que es un decorador.  Para ejecutar nuestro codigo primero debemos compilarlo con tsc y luego lo ejecutaremos con nodeJs desde la consola de VS Code.

tsc decorator.ts
node decorator.js

Conclusión

Hemos visto el uso  namespaces, módulos y decoradores. Nuevamente es simplemente una introducción y un buen punto de partida para comenzar a entrar más en profundidad. En los próximos post veremos un ejemplo de una aplicación sencilla, un abm, utilizando TypeScript junto a JQuery.

[Tutorial] TypeScript | Javascript – Parte 5

En esta quinta entrega tocaremos el tema de funciones y genéricos. Como se usan en TypeScript y que nos brinda para trabajar con ellos. Nuevamente utilizaremos VS Code en algunos ejemplos.

Objetivo

En esta quinta entrega tocaremos el tema de funciones y genéricos. Como se usan en TypeScript y que nos brinda para trabajar con ellos. Nuevamente utilizaremos VS Code en algunos ejemplos.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Funciones

Tenemos 2 formas de declarar funciones. Una es de forma anónima la otra es por medio de un nombre. Esto es igual que en javascript no tenemos diferencias:

// por Nombre
function GetSum(x, y) {

&nbsp;&nbsp;&nbsp; return x + y;

}

// funcion anonima
let sum = function(x, y) { return x+y; };

Ahora veamos el enfoque con los tipos de TypesCript como debería ser declarada la misma función para tener la validación de tipos.

// por Nombre
function GetSum(x: number, y:number): number {
&nbsp;&nbsp;&nbsp; return x + y;
}

// funcion anonima
let sum = function(x: number, y: number): number { return x+y; };

En el ejemplo declaramos que parámetros recibiremos en la función. Van a ser de tipo numérico y que a su vez esta función nos devolverá también un tipo de dato numérico.

Inferencias de tipos

Un tema interesante es la inferencia de tipos. Lo que hace el compilador es detectar que tipo valor le estamos agregando por ejemplo:

let x = 1;
let x: number = 1;

Al asignar un valor numérico automáticamente sabe de qué tipo es  y no es necesario usar la forma larga como vemos en la segunda línea.

Vamos a ver un ejemplo de una matriz. En una matriz el compilador decidirá cuál es el mejor tipo:

let x = [”Fernando”, “Pepe”, null];

 

¿Y qué pasa con las clases? veamos el ejemplo:

class herramienta{}
class Martillo extends herramienta{}
class Destornillador extends herramienta{}
class Lijadora extends herramienta{}

let list = [ new Martillo(), new Destornillador(), new Lijadora() ]

El compilador tomará como tipo el primero de la lista del array. En estos casos debemos declararle de que tipo.

let list: Herramienta[] = [ new Martillo(), new Destornillador(), new Lijadora() ]

Tipos Genéricos

El objetivo de los tipos genéricos es generar clases altamente reutilizables. Podemos crear piezas de software que pueden accionar sobre un gran cantidad de tipos comunes. Esto permite que cualquier persona que lo utilice junto a sus tipos personales. Hoy la gran mayoría de los lenguajes de programación lo soportan y TypeScript no podía quedarse afuera.

Para empezar veamos un ejemplo que:

function GetValue(arg: number): number {
&nbsp;&nbsp; return arg;
}

Supongamos que en lugar de usar number usamos any, sería un forma de hacerla genérica, pero en verdad no es conveniente, estaríamos perdiendo información útil del tipo y su funcionalidades. Ahora bien, cómo debemos declararlo de forma genérica:

function GetValue&lt;T&gt;(arg: T): T{
&nbsp;&nbsp; return arg;
}

En el ejemplo vemos que agregamos la variable T que a diferencia de any sera mas precisa sin perder ninguna información del tipo. Ahora que tenemos nuestra declaración vemos como debemos invocar.

let result = GetValue&lt;string&gt;("hola mundo");

le dice que el parámetro que vamos a pasar es de ese tipo. También podemos llamara de la forma más simple y el compilador infiere el tipo automáticamente siendo tal vez un poco más legible.

let result = GetValue("hola mundo");

Ahora bien,r que problema vemos en el siguiente ejemplo:

function GetValue&lt;T&gt;(arg: T): T{
&nbsp;&nbsp; return arg.length;
}

Si pasamos el tipo string no habrá ningún problema pero si pasamos del tipo numeric no posee la propiedad length y nos dara un error.

En cambio por ejemplo si trabajamos con matrices esta funcionalidad, length estará presente en todos los tipos.

function GetValue&lt;T&gt;(arg: T[]): T[]{
&nbsp;&nbsp; return arg.length;
}

// Otra forma de declarar
function GetValue&lt;T&gt;(arg: Array&lt;T&gt;): Array&lt;T&gt;{
&nbsp;&nbsp; return arg.length;
}

Ahora vemos como hacer un clase genérica:

class GenericClass&lt;T&gt;{
&nbsp;&nbsp; add(arg1: T, arg2: T) =&gt;; T
}

let myGenericClass = new GenericClass&lt;numeric&gt;();
myGenericClass.add = function(arg1, arg2) {
&nbsp;&nbsp;&nbsp; return arg1 + arg2;
}

Por último, vamos hacer limitaciones en los tipos genéricos. Como vimos en el ejemplo al hacer una clase genérica puede ser que el tipo que pasamos no tenga un funcionalidad como en el caso que devolvía length.

Lo que podemos hacer es restringir una función para trabajar con todos los tipos tengan o no la propiedad length.

Para esto necesitamos crear una interface:

interface WithLength {
&nbsp;&nbsp;&nbsp; length: number;
}

function GetValue&lt;T extends WithLength&gt;(arg: T): T {
&nbsp;&nbsp;&nbsp; console.log(arg.length);
&nbsp;&nbsp;&nbsp; return arg;
}

Como podemos ver en la imagen ya no tendremos el problema ya que no tira errores.

Conclusión

Hemos visto el uso funciones, la inferencia de tipos y una introducción a tipos genéricos. Si bien es simplemente una introducción es un buen punto de partida para comenzar a entrar más en profundidad. En el próximo post veremos namespaces, módulos y decoradores para cerrar este tutorial para principiantes.

[Tutorial] Javascript | TypeScript – Parte 4

En esta cuarta parte tocaremos interfases, classes y funciones.No solo veremos la teoria sino también algunos ejemplos en VS Code.

Objetivo

En esta cuarta parte tocaremos interfases, classes y funciones.No solo veremos la teoria sino también algunos ejemplos en VS Code.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Clases

Comenzaremos por las Clases. En JavaScript siempre utilizamos funciones y el patrón prototipo para hacer uso de clases y  herencia. Si están familiarizados con C# o Java tal vez nos resulte bastante incómodo en Javascript. Por esto, TypeScript, nos da la posibilidad de usarlas del modo como cualquier lenguaje orientado a objetos. También nos brindara compatibilidad futuras implementaciones de las especificaciones ECMAScript. Veamos:

class Persona {
nombre: string;

constructor(_nombre: string) {
this.nombre = _nombre;
}

greet() {
return "Hello, " + this.nombre;
}
}

let fernando = new Persona("Fernando");

Como comente antes, es bastante más familiar que como lo usamos en JavaScript.  Algunos puntos para tener en cuenta:

  • this hace referencia a la misma clase.
  • El constructor, a diferencia de los lenguajes que ya conocemos siempre debe llamarse constructor.
  • En las funciones no es necesario agregar la palabra function.

Como cualquier lenguaje de programación orientado a objetos tenemos herencia. Esto lo haremos por medio de la palabra reservada extends como vemos en el ejemplo:


class Estudiante extends Persona{

constructor(nombre: string) {
super(name);
}

greet() {
return super.greet();
}

}

En el ejemplo podemos ver la palabra super que hace referencia a la clase de la cual heredamos.

Modificadores

TypeScript nos da 3 tipos de modificadores de acceso, públicos, privados y protegidos.

Público

Por defecto serán declarados como públicos, esto hará que podamos acceder desde cualquier lugar del programa. Podemos marcarlo implícitamente si lo queremos pero no es necesario.

class Persona {
public name: string;

public constructor(theName: string) {
this.name = theName;
}
}

Private

Cuanto lo declaramos como private el método no podrá ser accesible desde fuera de la clase.


class Persona {
private name: string;

public constructor(theName: string) {
this.name = theName;
}
}

Protected

Funciona como private,  pero a diferencia de este pueden ser accedidas solamente por las clases derivadas.


class Persona {

protected name: string;
public constructor(theName: string) {
this.name = theName;
}
}

ReadOnly

Podemos declarar solo lectura, esto hará que no pueda asignarle ningún valor desde fuera de la clase y la asignación debe hacerse en el constructor.

class Persona {
readonly name: string;

public constructor(name: string) {
this.name = name;
}
}

let persona = new Persona("Fernando");
persona.name;

Accessors

En TypeScript tenemos la posibilidad de usar getters y setters.


class Persona {
private name: string;

get Name():string{
return this.name;
}

set Name(_name: string){
this.name = name;
}

}

Tener setters nos da la posibilidad de poder evaluar la asignación de un valor por medio de una comparación.

Propiedades Estáticas

Podremos crear un miembro estático que serán visibles sin la necesidad de instanciar la clase.

class Calculadora {

static result: number = 0;

}

Calculadora.result;

Clases abstractas

Estas clases no pueden instanciarse directamente. Deben ser heredadas obligatoriamente. A diferencia de una interface puede implementar funcionalidades en sus miembros.

abstract class Persona {

abstract getName(): void;

}

class Estudiante extends Persona {
getName(): void {}
}

Interfaces

Son una forma de declarar contratos dentro del código para las clases que tienen características comunes. Veamos la siguiente clase:


class Persona {

public name: string;

public constructor(theName: string) { this.name = theName;}

}

Supongamos que vamos a tener 2 clases : estudiantes y profesores. Todos deben cumplir la regla de tener una propiedad name. Para esto usaremos una interface que obligará a que sea implementada:

interface Persona {
name: string;
}
class Estudiante implements Persona{
public name: string;
}

class Profesor implements Persona{
public name: string;
}

Propiedades opcionales

Una buena caracteristicas es que podemos declarar variables opciones las cuales no obligan a las clases que implementar a declarar esos miembros. Se hace por medio del carácter ?.

interface Persona {
name?: string;
}

Propiedades solo lectura

podemos especificar que los miembros deben ser declarados como readonly.


interface Persona {
readonly name: string;
}

Conclusión

Hemos las clases, interfaces y funciones. Si bien el tema puede ser mucho más extenso, con este pantallazo general nos dan la base para poder seguir expandiendo nuestros conocimientos. El el próximo post veremos el tema de Tipos Genéricos.

[Tutorial] TypeScript | Javascript – Parte 3

Todo lenguaje de programación orientado a objetos tiene tipos de datos más o menos complejos como por ejemplo numeros, cadenas de caracteres, etc. En TypeScript tenemos soporte para datos tipado orientados a JavaScript.

Objetivo

En esta tercera parte tocaremos los tipos que TypeScript nos brinda para trabajar y  sus declaraciones. Veremos algunos ejemplos interesantes en VS Code.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Para empezar veremos la estructura básica de cómo debemos declarar una variable:

(alcance) (Nombre): &lt;Tipo&gt; = (Valor);

Ahora que conocemos la estructura básica de declaración comenzaremos con los disponibles.

Tipos

Boolean

Es el tipo más común que podemos encontrar en cualquier lenguaje de tipos. Solamente puede tener 2 valores posibles true o false.

let isCorrect: boolean = true;

Numeric

Este puede contener cualquier número inclusive con decimal. Como en Javascript, TypeScript puede guardar números decimales, flotantes.

let money: numeric = 3.34;
let age: numeric = 12;

String

En este tipo de datos guardaremos caracteres, cadenas de caracteres o texto. Podemos utilizar comillas dobles o comillas simples para encerrar el valor. También plantillas de cadenas agregando la notación $( nombre de variable) dentro de nuestros string.

let titlePage: string = "Hola Mundo";
let textInside: string = "This is ${ titlePage }";

Array

Para usar array tenemos 2 formas de hacerlo, una es muy similar a javascript la otra es muy similar a lo que se denomina Tipos Genéricos.

let colors: string[] = ["Rojo", "Azul", "Verde"];
let colors: Array&lt;string&gt; = ["Rojo", "Azul", "Verde"];

Tuple

Este tipo es que se denomina comúnmente llave valor. similar a un array, nos permitirá acceder al valor por medio de su llave.

let x: [string, number] = ["Pepe", 2];
console.log(x["Pepe"]);

Enum

Son un conjunto de valores que por default  será asignado dependiendo el orden en que se encuentren. También podemos darle valores asignarles nosotros los valores o decirle que empiece la secuencia desde un valor predeterminado declarándose al primero de la lista.

enum Animales{ Perro, Gato, Jirafa, Leon };
enum Animales{ Perro = 1, Gato, Jirafa, Leon };
enum Animales{ Perro = 2, Gato = 5 , Jirafa = 7, Leon = 8 };
let animalTipo = Animales.Jirafa;

Any

La usaremos cuando no sabemos realmente qué valor va a tomar en nuestra aplicación. También podemos usarlo en un array que puede tener valores del tipos distintos. Es como tener un variable de tipo dinámica.

let valorDesconocido: any = 20;
let valoresDesconocidos: any[] =&nbsp; ["Rojo", 2, true];

Void

Básicamente es lo contrario de lo anterior. Sería no tener ningún tipo. Casi siempre lo usaremos en funciones o métodos que no devuelven un valor.

let sinTipo: void = undefined;

fuction NoDevuelveValor(): void{
&nbsp;&nbsp;&nbsp; console.log("Hola");
}

Null y Undefined

No solo son valores también pueden declararse como tipos. Por defecto son subtipos de los anteriores esto quiere decir que podemos asignar este valor a un tipo como numerico o string.

let sinTipo: number = null;

Never

Representar valores que nunca ocurrirán. Podría usarse por ejemplo en una función que siempre va devolver un error ya que en realidad no devuelve nada. No podemos asignarle never a ningún tipo solamente puede asignarse a sí mismo.

function lanzarError(mensaje: string): never{
&nbsp;&nbsp;&nbsp; throw new Error(mensaje)
}

Aserciones de tipo

De esta forma podemos decirle al compilador que confíe en nosotros para asignarle un tipo. Es similar a Cast de otros lenguajes. Podemos usarlo de 2 formas:

let algunValor: any = 123;
let stringLengh: number (&lt;string&gt; algunValor).length;
let stringLengh: number (algunValor as string).length;

Declaraciones de variables

Tenemos 2 let y const. Let es muy similar a usar var y const es como cualquier constante en los lenguajes de programación evitando que se cambie su valor una vez asignado.

Var

La declaramos igual JavaScript:

var nombre = "Jorge";

Las variables de tipo var pueden estar declaradas en cualquier bloque. Hay que tener en cuenta que al declararla como var puede ser accedida desde bloques superiores. No es conveniente usar var debido a que puede causarnos muchos problemas.

Let

Este viene a solucionar el problema que tenemos con var y su diferencia no está en la sintaxis sino en la semántica:

let nombre = "Jorge";

Al utilizar let estamos diciendo que la variable tiene el alcance del bloque en el cual fue declarado.esto quiere decir que no pueden ser alcanzadas desde fuera del bloque donde se encuentra.

Const

Este tipo de declaración tienen las mismas características de let pero al asignarle un valor no podrá ser cambiada en ningún momento posterior.

const nombre = "Jorge";

Al utilizar let estamos diciendo que la variable tiene el alcance del bloque en el cual fue declarado. Esto quiere decir que no pueden ser alcanzadas desde fuera del bloque donde se encuentra.

Conclusión

Hemos tenido nuestro segundo acercamiento a los tipos de TypeScript y cómo debemos declararlos. Si conocen C# o  Java notaran que las referencias son muy similares pero respetando las características de JavaScript. El el próximo post veremos el tema de interfaces y clases.

[Tutorial] TypeScript | Javascript – Parte 2

En esta segunda parte tocaremos algunos temas sobre la configuración de TypeScript, daremos nuestros primeros pasos y veremos algunos puntos interesantes sobre Visual Studio Code que será la herramienta que estaremos utilizando en los ejemplos.

Objetivo

En esta segunda parte tocaremos algunos temas sobre la configuración de TypeScript, daremos nuestros primeros pasos y veremos algunos puntos interesantes sobre Visual Studio Code que será la herramienta que estaremos utilizando en los ejemplos

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Lo primero que haremos es crear un archivo. Para esto utilizaremos la consola de VS Code para generarlo por medio siguiente comando:

tsc --init

Este comando no creará un archivo que en su interior contendrá algo parecido a lo siguiente:

{
&nbsp; "compilerOptions": {
&nbsp;&nbsp;&nbsp;&nbsp; /* Basic Options */
&nbsp;&nbsp;&nbsp;&nbsp; "target": "es5",
&nbsp;&nbsp;&nbsp;&nbsp; "module": "commonjs",
&nbsp;&nbsp;&nbsp;&nbsp; "strict": true,
&nbsp;&nbsp;&nbsp;&nbsp; "sourceMap": true
&nbsp;  }
}

Si bien este archivo tiene muchas opciones de configuración las que por default están activas son las 3 que vemos en el cuadro anterior. A simple vista vemos la propiedad “target” que es la que indicará que version de ECMAScript usará para crear el JavaScript final.

Ahora crearemos nuestro primer archivo de TypeScript. Los archivos TypeScript poseen la extensión “.ts”. Lo haremos desde el icono de VS Code, creamos el archivo app.ts:

y dentro de este archivo pondremos nuestro código:

class InitApp{
&nbsp;&nbsp;&nbsp;&nbsp; public static main(){
&nbsp;&nbsp;&nbsp;  console.log("Hola Mundo");

return 0;
&nbsp;&nbsp;&nbsp;&nbsp; }
}

InitApp.main();

Nuestra aplicación no hace nada muy difícil. Solamente mostrará en consola el mensaje “Hola Mundo!”. Veamos qué pasa cuando compilamos el código. Para hacerlo ejecutaremos en la consola el siguiente comando indicando el nombre de nuestro archivo ts:

tsc app.ts

Como resultado tendremos un nuevo archivo app.js que es el resultado de la transpilación:

A simple vista vemos que el código tal vez es un poco más extenso. Pero eso no debe preocuparnos ya que este nuevo código correrá sin ningún problema en los navegadores que soporten el ECMAScript que le indicamos el archivo de configuración.

Vamos hacer que nuestro codigo falle, no hay que preocuparse por el momento por cosas que veamos y no entendamos lo veremos en los siguientes post. Para darles un ejemplo agregaremos 2 líneas de código:

class InitApp{
&nbsp;&nbsp;&nbsp;&nbsp; public static main(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let msg:string;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; msg= 1;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; console.log(msg);
...

En la declaración estamos diciendo que la variable msg es del tipo string, pero, en la línea siguiente le estamos asignando un valor numerico. Automáticamente el VS Code nos indicará que la asignación no es válida gracias al Intellisense que viene con el.

También podemos ejecutar la compilación por medio de consola para comprobar si realmente es un error. Al ejecutar la compilación por medio del comando tsc podemos ver el mensaje de error:

Corregiremos nuestro código para que deje de errar y lo ejecutaremos:

class InitApp{
&nbsp;&nbsp;&nbsp;&nbsp; public static main(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let msg:string;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; msg= "Hola Mundo!";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; console.log(msg);
...

Para ejecutarlo usaremos Node.Js junto al siguiente comando:

node app.js

Nuestra aplicación está funcionando correctamente. Ya tenemos nuestra primer app funcionando de la mano de TypeScript.

Tal vez sea molesto estar ejecutando todo el tiempo el comando tsc por consola cada vez que hacemos una modificación e inclusive obliga a tener una consola externa o tener abierta la consola VS Code la cual nos quita espacio de trabajo. Para esto tenemos 2 opciones:

Opción 1

El comando tsc tiene un opción muy interesante que es el comando -w. Este comando hace que el tsc quede en modo watcher. Cada vez que guardemos un archivo el tsc detectara el cambio y transpilara el código.

Opción 2

La segunda opción es configurar una tarea en VS Code, presionando f1 nos abrirá la ventana de “Command Palette” y escribiremos Run Build Tanks:

Nos preguntará sobre qué archivo y elegiremos ts.config. Una vez hecho lo anterior nos creará una carpeta nueva llamada .vscode y dentro un archivo tasks.json donde veremos algo parecido a lo siguiente.

{
&nbsp;&nbsp;&nbsp; "version": "2.0.0",
&nbsp;&nbsp;&nbsp; "tasks": [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "type": "typescript",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; "tsconfig": "tsconfig.json",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; "problemMatcher": [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "$tsc"
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; ],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; "group": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; "kind": "build",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; "isDefault": true
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; ]
}

Ahora podemos usar la combinación de teclas ctrl + shift + b para ejecutar la compilación.

Conclusión

hemos tenido nuestro primer contacto con TypeScript y hemos visto algunas características de las herramientas. En el próximo post comenzaremos con la introducción al lenguaje.

[Tutorial] TypeScript | Javascript – Parte 1

He notado que al ingresar un persona nueva a nuestro equipo y comienza a trabajar con Angular, React o Vue.js, sin haberlo tocado nunca, la inducción es bastante difícil. Me ha dado un buen resulta que antes de Angular u otras tecnologías similares, invertir tiempo en el aprendizaje de base, en este caso TypeScript, como se usa y cual es su filosofía.

Objetivo

El objetivo de esta publicación es tocar los temas: ¿Que es TypeScript?, ¿Como se usa TypeScript?, qué herramientas tenemos y ver un ejemplo de su uso. También trataremos sus beneficios y qué puntos debemos tener en cuenta para su uso.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

¿Que es TypeScript?

TypeScript es uno de los lenguajes de programación más nuevos que han aparecido. Es de código abierto, desarrollado y mantenido por Microsoft. Microsoft lo denomina como SuperSet de javascript. ¿Que quiere decir esto? Básicamente busca extender las características de un lenguaje tipado a JavaScript y puede ser usado desde aplicaciones pequeñas o en aplicaciones muy grandes.

Esto no significa que los navegadores van a entender TypeScript , TypeScript lo que hace es convertir nuestro código, transpilarlo, a código javascript que el navegador va a ejecutar. Algo que la gente de TypeScript hizo fuerte hincapié es que cualquier codigo escrito en javascript debe funcionar en TypeScript. Si tenemos codigo ya escrito debe funcionar sin problemas.

Javascript está basado en las especificaciones de ECMA Script que actualmente se encuentra en la versión 6. Estas especificaciones se mueven mucho más rápido de que los desarrolladores puedan adquirir el conocimiento, o la velocidad con la cual podemos actualizar nuestras aplicaciones. Inclusive la implementación de los fabricantes en los navegadores, servidores o sistemas operativos.  Existe un GAP que podemos ver en la siguiente imágen:

A pesar de ser antiguar, el gap de implementación comparadas entre 2015 y 2016 existía, hoy existe y seguirá existiendo.

Aquí es donde TypeScript es un herramienta realmente poderosa debido a que el resultado final que es JavaScript puede transformarse en la versión de ECMA Script que deseemos. Esto aumentando la compatibilidad de nuestras aplicaciones y reduce el impacto de sus actualizaciones.

Al ser un lenguaje basado tipos y POO, si poseemos este conocimiento de cualquier otro lenguaje basado en estos principios como .Net C#, Java o PHP, TypeScript nos parece bastante familiar solamente nos quedará entender su sintaxis.

Para hacer una comparación entre TypeScript y Javascript diremos que el primero es de tipo estático y el segundo dinámico lo veremos en la siguiente tabla:

Ahora veremos cuales son las características principales de TypeScript:

  • Cualquier código JavaScript debe funcionar sin problemas en TypeScript.
  • Como en la tabla anterior, tipado estático.
  • Se pueden utilizar clases y módulos.
  • Constructores, propiedades, funciones.
  • Podemos usar interfaces.
  • Expresiones especiales como Fat arrows =>.
  • Intellisense y comprobación de sintaxis en tiempo real en la gran mayoría de las herramientas.

Por último podemos ver en el último gráfico la adopción de TypeScript a nivel desarrolladores y empresas que nos demuestra lo importante de su utilización.

¿Que necesitamos para empezar?

Lo primero que necesitamos tener instalado es Node.JS, puede ser decargado desde aqui https://nodejs.org/en/. Podemos usar cualquier procesador moderno, yo usare Visual Studio Code que puede ser descargado des aqui https://code.visualstudio.com/.

Una vez instalada estas 2 herramientas, desde el visual studio y su consola, debemos instalar TypeScript. Esto lo hacemos desde un paquete npm con el siguiente comando.

npm install -g typescript

Una vez instalada podemos validar la versión y la ayuda con los siguientes comandos.

tsc --version
tsc --help

Conclusión

En esta primera parte vimos que es y algunos de sus beneficios. También vimos la importancia de la adopción de este lenguaje de programación como un buen lenguaje al mejor estilo C# o Java. En próximos post de este tutorial iremos entrando más en detalle sobre el tema.