Etiquetatypescript

Como crear typings para librerías en Typescript ?

Si algo tengo que reconocer es que Typescript nos permite sentir que tenemos el control en javascript y eso es gracias también a los typings (tsd) , pero algunas librerías no tienen los tiene typings, yo me he visto en necesidad de escribir los typings de la librería rdjs.

Creando los typings

Para crear nuestro typings de la librería, tenemos que tener nuestra librería instalada por npm y dentro de de nuestro proyecto creamos un directorio llamado typings y dentro otro con el nombre de la libreria que queremos en mi caso rdjs

typings/index.d.ts
typings/rdjs/index.dt.ts

Typescript interpreta los archivos * .d.ts como archivos de declaración y estos describen los métodos que expone la librería sin la implementación de ellos.

En el directorio de typings tenemos un index.d.ts que contendrá una referencia a cada uno de nuestros archivos de declaración.

En este caso, typings/index.d.ts contendrá una referencia al archivo rdjs/index.d.ts.

/// <reference path="rdjs/index.d.ts" />

Definiendo los typings

Todas las definiciones de los typings la realizare en typings/rdjs/index.d.ts, lo primero que debemos hacer es crear un ambient module los cuales son declaraciones de tipo que no definen nada de lo que el código realmente hace, sino que simplemente define su forma.

Declaramos un módulo con el mismo nombre que el módulo npm en mi caso rdjs.

declare module 'rdjs'{

}

Luego definimos una interfaz con los métodos y su firma que queremos que utilice, en este caso he puesto los diferentes métodos que expone get, post, put y delete.

Realizamos un export del objecto rdjs es un objeto, nuestro módulo exportara una variable const implementando la interfaz que contiene nuestras especificaciones.

const rdjs: rdjs
export = rdjs

Ahora tenemos los métodos que utilizare en mi aplicación y puedo ver como visual studio code me autocompleta, me especifica la firma que necesita ese método y sus parámetros y el compilador me alerta de que no estoy enviado el tipo esperado.

Aqui todo el código completo o puedes verlo en Github

Ahora tenemos nuestro ideal puede autocompletar y ademas mostrarla firma de los métodos o visualmente alertarnos que no estamos pasando los parámetros especificados en la interfaz.

Ademas el compilador nos alerta de que no estoy enviado enviando los parámetros esperados.

scroller.ts(22,9): error TS2346: Supplied parameters do not match any signature of call target.

Happy Typings.

Modulos y Controllers de Angular con Typescript

Typescript nos facilita la posibilidad de poder crear Módulos y Controllers de Angular utilizando Clases de Typescript en vez de Funciones Javascript.

Esto nos permite aprovechar las ventajas de la programación OOP para poder implementar Interfaces , Herencia, Polimorfismo etc.

Los Controllers en angular nos permiten definir un modelo para la vista y los métodos a los cuales ella podrá acceder, cuando creamos un controller en angular con javascript realizamos lo siguiente:

– Registramos el controller en el módulo.
– Definimos las funciones e inyectamos las dependencias.
– Definimos variables que representan el controller
– Implementamos métodos para el modelo.

Como en este ejemplo:

angular.module(“pepapigtv”).controller(“InicioController”,[InicioController]);
function InicioController(){
var vm = this;
vm.tituloinicio = “Hola Pepapigtv”;
vm.yasalude = false;
vm.Saludar = function() {
vm.saludo = “Hola George”
vm.yasalude = true ;
}
}

Este mismo proceso lo realizaremos utilizando Clases de Typescript, para continuar con el proyecto de ejemplo de la pepapig del artículo anterior.

En el post de hoy realizaremos lo siguiente:

  • Vincular la vista con el Controller.
  • Crear una Interfaz que especifica lo que debe exponer el controller.
  • Crear una Clase Controller.
  • Registrar el Controller.
  • Renderizar las propiedades y metodos del modelo expuesto por el controller.

En el archivo pepapig.ts modificaremos la configuración del RouteProvider, este nos permite además de especificar el template que va a utilizar para una ruta, también decir que controller se encargará de esa vista.

Vamos a nuestro directorio raíz de la aplicación y modificamos el /app/pepapig.ts a cada template definido le especificamos su respectivo controller, el resultado final es el siguiente:

module pepapig{
var pepapigtv = angular.module("pepapigtv",["ngRoute"]);
console.log("Hola Soy Pepapig OINN!!!");
pepapigtv.config(pepaRouteConfig)
//Configuracion del router
function pepaRouteConfig($routeProvider: ng.route.IRouteProvider) : void {
$routeProvider.when("/inicio",{
templateUrl: "app/views/inicio.html",
controller: "inicioController as vm"
}).when("/personajes",{
templateUrl: "app/views/personajes.html"
}).when("/acerca",{
templateUrl: "app/views/acerca.html"
}).otherwise("/inicio");
}
}

Con lo anterior hemos dicho al RouteProvider que la vista inicio.html será manejada por el controller inicioController.

Interfaz y Controller:

Cuando creamos Controllers de Angular utilizando Typescript podemos usar interfaces, en la cual se definirán las variables y los métodos que nuestro controller proveerá.

El controller expondrá a la vista las propiedades y métodos que hemos acordado en la interfaz y podemos usar el constructor para definir valores iniciales a estas variables.

Creando el Controller

Vamos al directorio app/controllers/ aquí creamos “inicioController.ts”, para tener el código más organizado creamos nuestro controller dentro de pepapig.controllers.

las Interfaces deben empezar con I por estandar, en nuestro caso IInicioController, en él definimos las propiedades utilizando Type Anotation para especificarel tipo que es cada una y la firma de los métodos.

module pepapig.controllers {
interface IInicioController {
//titulo de la view de tipo string.
tituloinicio:string;
//para saber si ya se han saludado de tipo boolean true o false
yasalude:boolean;
//un metodo que saludara al usuario.
Saludar(): void;
}
}

Con la interfaz ya creada podemos implementarla en el controller y usamos la palabra class InicioController e “implements” la cual forza a que nuestra clase “InicioController” cumpla con el contrato de la interfaz IInicioController.

Definimos las variables de acuerdo a nuestra interfaz, además en el constructor le damos unos valores por defecto a las propiedades, nuestro código debería quedar como lo siguiente:

class InicioController implements IInicioController {
tituloinicio:string;
yasalude:boolean;

constructor(){
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}

Saludar(){
this.yasalude = true;
this.tituloinicio = "Como te llamas tu ?"
}

}

Ahora nos falta registrar nuestro controller en el módulo de pepapig
al igual que en javascript usamos:

angular.module("pepapigtv").controller("InicioController",InicioController);

El resultado final sera este:

module pepapig.controllers {
interface IInicioController {
tituloinicio: string;
yasalude: boolean;
Saludar(): void;
}

class InicioController implements IInicioController {
tituloinicio: string;
yasalude: boolean;
constructor() {
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}
Saludar() {
this.yasalude = true;
this.tituloinicio = "Como te llamas tu ?"
}
}
angular.module("pepapigtv").controller("InicioController", InicioController);
}

Ahora nos toca modificar la vista para que pueda renderizar los valores expuestos por el Controller, asi que vamos a inicio.html y utilizamos las expresiones de angular para renderizar el modelo en la vista y además usamos la directiva ng-click para poder llamar el método desde un button.

{{mv.tituloinicio}} renderizamos el valor del modelo mv y la propiedad tituloinicio,

creamos un input de tipo button y la directiva ng-click la vinculamos a la acción vm.Saludar().

*ng-click: nos permite vincular una accion a partir de un elemento que se le ha realizado un click.

Nuestra vista inicio.html debería quedar como esto:

<h1>Inicio</h1>
{{vm.tituloinicio}}

<input type="button" value="Hola" />

Compilamos y vinculamos en nuestro index.html el controller creado, justo después de pepapig.js luego de esto compilamos (ctrl + shift + b) e iniciamos nuestro webserver y vemos como nuestro controller interactúa con nuestra app.

En resumen, hemos visto como crear controllers de angular usando clases en typescript en implementando interfaces, aquí el resultado de nuestro .ts convertido en InicioController.js

var pepapig;
(function (pepapig) {
var controllers;
(function (controllers) {
var InicioController = (function () {
function InicioController() {
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}
InicioController.prototype.Saludar = function () {
if (this.yasalude) {
alert("ya te salude!!!");
}
else {
this.yasalude = true;
}
this.tituloinicio = "Como te llamas tu ? " + this.yasalude.valueOf();
};
return InicioController;
})();
angular.module("pepapigtv").controller("inicioController", InicioController);
})(controllers = pepapig.controllers || (pepapig.controllers = {}));
})(pepapig || (pepapig = {}));

Happy Typescripting!!

Creando Apps con Angular, Typescript y Visual Studio Code

Cada dia que pasa con Typescript me doy cuenta de lo increible que realizar nuestras aplicaciones angular y sumado a la potencia de visual studio code aumenta en forma exponencial nuestra velocidad de trabajo y nos permite ser mas productivos y agiles a la hora de desarrollar nuestras aplicaciones.

Aqui explicare como hacer una aplicacion de Angular utilizando Typescript y Visual Studio Code, en esta primera fase tocare los siguientes puntos:

1- Crear estructura la estructura
2- Instalando dependencias (Typescript, Nodejs, Type definitions, librerias js etc).
3- Modulos
4- RouteProvider
5- Views

Primero creamos nuestra estructura de archivos para la aplicacion:

pepapig/
------/app
----------/controllers
----------/directives
----------/views
------/css
------/scripts
------index.html

Debemos tener instalado Typescript y TSD (TypeScript Definitions Manager) para poder tener las definiciones de angular en el nuestro Visual Studio Code, si no lo has realizado puedes ver mi post anterior (“TypeScript y Angular con Visual Studio Code”) o seguir los pasos.

Primero instalaremos Nodejs y luego de su instalacion con el gestor de paquetes NPM Node Package Manager, instalaremos los Typescript Definitions, desde la consola nos colocamos en la raiz del directorio (donde esta el index.html) e instalamos Typescript y TSD (TypesScript Definition Manager).

$ npm install -g typescript
$ npm install -g tsd

Ahora las definiciones utilizado el tsd de angular y angular-route con la opciones -r -s nos busca las dependecias y nos guarda en el tsd.json las typedefinitions instaladas:

$ tsd install angular angular-route -r -s

- angularjs / angular-route
-> angularjs > angular
-> jquery > jquery
- angularjs / angular
-> jquery > jquery

>> running install..

>> written 3 files:

- angularjs/angular-route.d.ts
- angularjs/angular.d.ts
- jquery/jquery.d.ts

Para poder visualizar nuestra aplicacion en un servidor local instalaremos el paquete http-server de nodejs que nos crea un servidor web, nos colocamos en el mismo directorio raiz y donde estamos escribimos:

npm install -g http-server

Ahora toca descargar la librerias de javascript de Angularjs y Angular-route (componente de angular para manejar las rutas en la url del navegador) estas las guardaremos en el directorio /scripts, tambien descargaremos Bootstrap para darle un poco de belleza a la aplicación.

Ahora crearemos nuestra pepapig.ts (ts, extension de typescript) en el directorio /app y creamos el modulo

module pepapig {
var pepapigtv = angular.module("pepapigtv",[]);
console.log("Hola Soy Pepapig");
}

Si nos fijamos el codigo anterior es casi identico a escribirlo con javascript, pero vamos a compilarlo shirt + ctlr + b , si todo ha salido bien debe crearse el archivo pepapig.js. En caso que te haya mostrado el mensaje que no hay tareas configuradas, es que no has configurado el entorno, puedes ver mi articulo anterior de Como configurar typescript, angular y visual studio code.

Nuestro archivo compilado pepapig.js debe ser muy parecido a esto:

var pepapig;
(function (pepapig) {
var pepapigtv = angular.module("pepapigtv", []);
console.log("Hola Soy Pepapig!");
})(pepapig || (pepapig = {}));

Ahora agregaremos todos los ficheros descargados y pepagin.js en nuestra pagina html, el la hoja de estilos de bootstrap en el top antes de y las librerias javascript antes del referenciaremos angularjs, angular-route.js y pepapig.js ademas agregaremos la directiva ng-app al body (ng-app define el ámbito sobre el que AngularJs actuara), nuestro html debe lucir algo similar a esto:

Router

Pero para definir rutas, usaremos el modulo de angular ngRoute, el cual debemos inyectarlo a el modulo pepapigtv.

El modulo ngRoute tiene un componente llamado $routeProvider el cual nos permite definir las ruta , por tanto inyectaremos el $routeProvider dentro del método config del modulo pepapigtv, vamos a pepapig.ts agregamos con lo siguiente:

En el RouteProvider configuraremos el when para especificar la ruta de nuestro template a partir de la ruta ejemplo cuando entre a http://localhost:8080/inicio me cargara la plantilla inicio.html
igual para los casos de personales o acerca, pero si entrara http://localhost:8080/lebronjames me enviara a inicio debido a que estoy utilizando otherwise “/inicio”.

pepapigtv.config(pepaRouteConfig)
function pepaRouteConfig($routeProvider: ng.route.IRouteProvider) : void {
$routeProvider.when("/inicio",{
templateUrl: "app/views/inicio.html"
}).when("/personajes",{
templateUrl: "app/views/personajes.html"
}).when("/acerca",{
templateUrl: "app/views/acerca.html"
}).otherwise("/inicio");
}

 Nos falta ahora crear esas plantillas en las rutas especificadas por tanto creamos inicio.html, personajes.html y acerca.html.

En cada una de ellas colocaremos un h1 que espefique que vista es ejemplo : vistainicio, vistapersonajes y vistaacerca.

Ahora modificare el index.html y agregaremos una lista con los links a las vistas:

Nos falta agregar el lugar donde se cargaran dichos templates para eso utilizamos la directiva ngView (ngView es una directiva, que nos ayuda a renderizar la vista asociada a una ruta, cada vez que la ruta cambia, el contenido del ella cambia) en nuestro index.html.

Con todo los cambios ya realizados, podemos compilar nuevamente y ver que nuestro pepapig.js se actualiza con los cambios de Router, desde la consola nos movemos al directorio raiz de nuestra aplicacion y escribimos http-server para iniciar el servidor web e iniciar la aplicacion en el browser.

$ http-server
Starting up http-server, serving ./
Available on:
http:127.0.0.1:8080
http:192.168.1.131:8080
Hit CTRL-C to stop the server

Ahora si visitamos la url nos debe salir la web con los links y hacer click en ella podemos visitar las vistas de cada una de ellas.

Happy Typescripting!!!

Que son los Typescript Definitons y TSD ?

En estos días luego cuando alguien me pregunto que son los tsd para que se usan y cual es su función con Typescript. he decidido explicarle de forma mas clara por esta vía.

Una de las ventajas de Typescript es que nos permite utilizar strong type en nuestro código javascript, Typescript soporta los typos primitivos o básicos de javascript object, string, number , boolean etc.

Pero en nuestro día a día utilizamos otras librerías como Jquery, Angular, Backbone o nuestros propios módulos, para Typescript poder darnos el soporte a nivel de autocompletado, strongtype, definición de los métodos.

Typescript necesita tener una definición de los tipos expuestos por las librerias o nuestras librerías y aquí aparecen los “Typescript Definitions Files”.

Type Script Definitions Files
Los Typescripts Definitions Files su extension es .d.ts describen los métodos, tipos y objects expuestos por las librerías externas.

Estos archivos son utilizados por el compilador de Typescript para el static type checking y por los ides (sublimetext, visual studio code) para facilitarnos el autocompleado, mostrarnos la definición de los miembros y métodos de las librerías que estamos utilizando.

Como consigo los d.ts las librerias que uso ?

DefinityType es una comunidad de Typescript que se encarga de definir la mayoria de las librerias javascript mas utilizadas, podemos ver en su repositorio https://github.com/borisyankov/DefinitelyTyped también a su vez nos facilitan tsd Typescript Definition Manager.

Typescript Definition Manager

Es un gestor de paquetes como Nuget o npm que se encarga de instalar los d.ts, buscar sus dependencias en los repositorios de DefinityType.

Para instalarlo, usaremos le gestor de paquetes de nodejs npm
y lo instalaremos de forma global y instalar las definiciones de nuestras librerías ejemplo angular.

npm install -g tsd
tsd install angular -r -s

Para mas información sobre el tsd puedes visitar el readme que explica todos los detalles del uso y sus opciones.

https://github.com/Definitelytyped/tsd#readme

Happy Typescripting!!!

Gulp y Typescript

Hoy he querido automatizar los builds de typescript con gulp para esto he tirado del paquete gulp-typescript y apoyandome en tsconfig.

Lo primero es que instalaremos gulp y el paquete gulp-typescript y en el archivo tsconfig.json especificaremos el tipo de compilacion y si queremos excluir algun folder, en mi caso he excluido el folder nodejs y dist para que no sea tomado en cuenta a la hora de build el tsconfig deberia quedar como el siguiente:

{
"compilerOptions": {
"target": "ES5"
}
,
"exclude": [
"node_modules",
"dist"
]
}

Ahora defino mi tarea en mi Gulpfile, creado un object de tipo tsProject en el cual me retornara todo los ts que tengo en el proyecto y dichos ts lo enviare a tsc, nuestro gulpfile deberia quedar como el siguiente:

var gulp = require('gulp'),
tsc = require('gulp-typescript'),
tsProject = tsc.createProject('tsconfig.json');

gulp.task(‘build-ts’,function(){
var tsResult = tsProject.src()
.pipe(tsc(tsProject));
return tsResult.js.pipe(gulp.dest(‘.’));
})

Ahora creamos un archivo typescript ejemplo hello.ts:

class hello{
}

Para compilar el archivo de typescript solo debemos desde la consola llamar la tarea build-ts y nos devolvera nuestr js esperado.
gulp build-ts

para ver el codigo de ejemplo en github:
https://github.com/danywalls/gulp-typescript
Happy Gulping!

TypeScript y Angular con Visual Studio Code

En estos días me he visto en la necesidad de desarrollar una aplicación bastante grande en angular y he optado por apoyarme de TypeScript, pero para sacar la ventaja que me brinda TypeScript tengo que tener las definiciones de Angular disponibles para el compilador y en Visual Studio Code, ahora explico como agregar las definiciones a Visual Studio Code.

TypeScript y TypeScript Definition Manager

Primero vamos a instalar typescript y tsd (typescript definitions) es un gestor de definiciones de typescript que se encarga de buscar las definiciones y sus dependencias.(http://definitelytyped.org/tsd/), desde la terminal escribimos:
npm install typescript -g
npm install tsd -g

Con ellos instalados ahora haremos una app de prueba creamos un folder /king y lo abrimos Visual Studio Code creamos un archivo index.html y un directorio app/ donde tendremos nuestro app.ts.

Configurar Visual Studio Code

Configuraremos la tarea para compile todos los .ts presionamos shift + cmd + b para compilar y al realizar esta acción, nos notificara que no hay una tarea configurada, realizamos click en la opción “Configure Task Runner” al hacer click nos creara un folder .vscode/tasks.json en la primera tarea del json eliminamos el valor de “args” que contiene “HelloWorld.ts” y lo dejamos en blanco para que tome todos los proyectos de typescript.
// args is the HelloWorld program to compile.
"args": [ ],

En la raiz de nuestro proyecto creamos el tsconfig.json, tsconfig.json especifica al compilador de typescript las especificaciones para realizar compilar el proyecto:

{
"compilerOptions": {
"target": "es5"
}
}

vamos a nuestro app.ts y tratamos de crear un modulo:
Seguir leyendo

© 2017 Danywalls

Tema por Anders NorénSubir ↑