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 los usaremos como repositorio de información.
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 creará 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 código 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 indicará 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 completamos 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 entraremos ya en nuestra aplicación demo.
