Cómo usar bibliotecas de JavaScript en aplicaciones Angular 2+

¿Recuerda cuando estaba aprendiendo AngularJS (versión 1) y los tutoriales le decían que no es necesario agregar JQuery a su proyecto?

Eso no ha cambiado, no es necesario que agregue JQuery a su proyecto Angular 2+. Pero si, por alguna razón, es posible que necesite usar algunas bibliotecas de JavaScript, debe saber cómo usarlas en Angular. Entonces, comencemos desde cero.

Voy a agregar underscore.js a un proyecto y le mostraré cómo funciona.

1. Crea un nuevo proyecto usando Angular CLI

Si aún no tiene CLI instalado en su máquina, instálelo. Después de la instalación, cree un nuevo proyecto (si aún no tiene uno).

ng nuevo aprendizaje

Ahora tendrá un nuevo proyecto Angular llamado " aprendizaje ".

2. Instale el paquete en su proyecto

Ve al proyecto que acabamos de hacer:

aprendizaje cd

Use su administrador de paquetes preferido para instalar la biblioteca que va a usar; Yo uso npmpara instalar underscore.js.

npm install - guardar subrayado

3. Importe la biblioteca a Angular (TypeScript)

Estamos escribiendo código en TypeScript y debemos seguir sus reglas. TypeScript necesita entender underscore.js.

Como sabrá, TypeScript es un superconjunto escrito de JavaScript que se compila en JavaScript simple. TypeScript tiene su propia sintaxis, función y las variables pueden tener tipos definidos. Pero cuando vamos a utilizar una biblioteca externa como el subrayado, necesitamos declarar definiciones de tipo para TypeScript.

En JavaScript, el tipo de argumentos no es importante y no obtendrá ningún error mientras escribe el código. Pero TypeScript no le permitirá dar una matriz a una función que acepte una cadena como entrada. Entonces aquí está la pregunta: ¿deberíamos reescribir el underscore.jsen TypeScript y definir los tipos allí?

Por supuesto que no: TypeScript proporciona archivos de declaración (* .d.ts) que definen tipos y estandarizan un archivo / bibliotecas JavaScript para TypeScript.

Algunas bibliotecas incluyen un archivo de escritura y no es necesario instalar el destino de tipo de TypeScript para ellas. Pero en caso de que una biblioteca no tenga un   .d.tsarchivo, debe instalarlo.

Solo necesitamos encontrar e importar el underscore.jsarchivo de definición de tipo. Le sugiero que use la búsqueda de tipos para encontrar el archivo de declaración para las bibliotecas que necesita.

Busque underscoreen Type Sceach y le redirigirá a tipos / guiones bajos. Instale el archivo de declaración usando el siguiente comando:

npm install --save @types/underscore

4. Importar declaración de tipo a la aplicación Angular

Digamos que va a utilizar un guión bajo en su app.component.tsarchivo. Abra el app.component.tspor su IDE y agregue el siguiente código en la parte superior del archivo:

import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/ 

El TypeScript en ese componente ahora entiende _y funciona fácilmente como se esperaba.

Pregunta: ¿Cómo usar una biblioteca que no tiene definición de tipo (* .d.ts) en TypeScript y Angular?

Créelo si src/typings.d.tsno existe. De lo contrario, ábralo y agregue su paquete:

declare var 

En su TypeScript, ahora necesita importarlo por el nombre de pila:

import * as yourPreferedName from 'yourLibrary';yourPreferedName.method(); 

Conclusión

Para terminar, hagamos un ejemplo simple para ver un ejemplo funcional _. Abra app.component.tsy dentro de la appComponentclase escriba un constructorque devuelve el último elemento de una matriz usando la _.last()función de subrayado :

... import * as _ from 'underscore'; ... export class AppComponent { constructor() { const myArray: number[] = [9, 1, 5]; const lastItem: number = _.last(myArray); //Using underscore console.log(lastItem); //5 } } 

Si abre su aplicación Angular ahora, accederá 5a la consola, lo que significa que podríamos agregar correctamente underscorea nuestro proyecto y está funcionando como se esperaba.

Puede agregar cualquier biblioteca de JavaScript a su proyecto simplemente siguiendo los mismos pasos.

Puedes seguirme para obtener más artículos sobre tecnología y programación.