I think I wrote thousand times that I can program (a little) with Javascript because of jQuery. After a few months using TypeScript, sooner or later I have to integrate jQuery, and in the next lines you can read how I do it
Discovering Definitely Typed
The repository Definitely Typed https://github.com/borisyankov/DefinitelyTyped is the main repository for definitios files used in the TypeScript language for the most important libraries. They are .d.ts files with all necesary code to be used inside an IDE.
The project is full, no more files are admited because there are so many Javascript libraries whose definition files are being collected in this project.
Using jQuery
The best way of keep on training with #TypeScript is creating a new project using jQuery. So, first step is downloading the definition file jquery.d.ts. As you can imagine, it is a good plan if you put order in your files, and in my case, I have a directory called typings where I have all definition files.
Typescript – jquery
The HTML code is very simple one, with a button and an input box. At the end of the code I call the scripts jQuery and app.js, where the logic of the app is.
</pre>
<!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>
The code of app.ts should be initializa with a reference to jQuery, before using it. Now, let’s create a new class that the contructor receive 3 parameters, and inside I search for the correspondant DIVs by using jQuery. Later, I have created a function in order to write some code in the label when the button is pressed or when the user types something in the input box. not a complex app!!
/// <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 the end, let’s execute the function that call the class and the app is ready for action.
The thruth is that this example is only an example of how to combine the power of #TypeScript and jQuery, and of course, I hope this example can show you, beginners, how to start using jQuery in small examples. Later on, I will introduce a complex exercise by using not only jQuery and TypeScript, but also RequireJS.
Al the code is available on my GitHub account. If you study the code, you can find that there are also two more files with jQuery examples, app1.ts and app2.ts.
Happy coding!