[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.

<script src="/dist/app.js"></script>

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<T>{
GetAll(): JQueryPromise< Array<T> >;
GetById(id: number): JQueryPromise<T>;
Delete(id: number) : JQueryPromise<void>;
Save(entity: T) : JQueryPromise<T>;
Update(id:number, entity: T) : JQueryPromise<void>;
}

export class Repository<T> implements IRepository<T>{

constructor(public serviceUrl: string){}

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

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

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

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

Update(id:number, entity: T): JQueryPromise<void> {
return <JQueryPromise<void>>$.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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *