Cómo muchas veces he comentado, gracias a jQuery programo en Javascript, o lo intento. Ahora llevo varias meses jugando con TypeScript, y claro, antes o después, tendría que probar a integrar jQuery dentro de TypeScript, pues, jQuery no es sino Javascript, y TypeScript termina compilado como Javascript. Pero ¿cómo se integran?
Descrubriendo Definitely Typed
El repositorio Definitely Typed https://github.com/borisyankov/DefinitelyTyped es el repositorio por excelencia para las definiciones de librerias. Son ficheros .d.ts que contienen todo lo necesario para poder tener la ayuda inteligente en el IDE.
Actualmente, el proyecto está desbordado pues son tantos los proyectos que se están incluyendo, que ya no admite más ficheros. El caso es que ahí podrás encontrar casi con toda seguridad las definiciones para las librerias más comunes usadas.
Probando jQuery
Que mejor manera de continuar nuestro entrenamiento en #TypeScript que probar un ejemplo usando jQuery. Para ello, lo primero es tener el archivo de definiciones jquery.d.ts. También es muy interesante que ordenes los archivos del proyecto, y en mi caso, todas las definiciones las tengo incluidas en el directorio typings.
Typescript – jquery
El código HTML a utilizar es muy simple, pues se incluye un botón y un cuadro de texto. Al final del código se incorporar los scripts tanto a jQuery como a app.js, donde está la lógica de nuestro ejemplo.
<!DOCTYPE html> <!-- Version 0.1.0 - ManejandoDatos TypeScript Template --> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <title>Manejando datos Template</title> </head> <BODY> <div class="container"> <div class="jumbotron">jQuery - TypeScript</div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <a href="#" id="boton" class="btn btn-info">Boton</a> <input id="nombre" /> </div> <div class="col-md-8" id="contenido"> </div> </div> </div> <script src="js/jquery.js"></script> <script src="ts/app.js"></script> </BODY> </html>
El código de app.ts debe inicarse con la referencia a jQuery, para poder usada. Vamos a crear un clase que recibirá tres parámetros cadenas, y en el constructor, buscaremos sus correspondientes objetos en el DOM mediante la utilización de jQuery. Luego, le damos la funcionalidad para que cuando se haga clic en el botón se muestre una cosa en otro DIV, y también para que cuando escribamos algo en el cuadro de texto, también se actualice la etiqueta.
/// <reference path="jquery.d.ts" />
class Test {
private _nombre: JQuery;
private _content: JQuery;
private _boton: JQuery;
constructor (nombre: string, contenido: string, boton: string) {
this._nombre = $('#' + nombre);
this._content = $('#' + contenido);
this._boton = $('#' + boton);
this._boton.on("click", (e) => {
this._nombrar();
})
this._nombre.on('keydown', (e) => { this._nombrar2() })
}
private _nombrar(): void {
this._content.html(' Hola ' + this._nombre.val());
}
private _nombrar2(): void {
this._content.html('je je!! ' + this._nombre.val());
}
}
$(() => {
var test = new Test('nombre', 'contenido','boton')
})
Al final, autoejecutamos la función.
En realidad, el ejemplo es más bien ilustrativo de toda la potencia de combinar #TypeScript y jQuery, pues a nivel práctico no tiene mucha utilidad. Si espero que os sirva de iluminación para hacer cosas más complejas. La próxima entrada también complicaremos el problema, metiendo por medio también a RequireJS.
El código de este ejemplo lo teneis disponible en GitHub. Si os meteis en el código, podeis comprobar que existen también dos ficheros app1.ts y app2.ts con otros ejemplos sencillos de uso de jQuery.
Happy coding!