Emlékszel, amikor az AngularJS-t (1. verzió) tanultad, és az oktatóanyagok folyamatosan azt mondták, hogy nem kell hozzáadnod a JQuery-t a projektedhez?
Ez nem változott - nem kell hozzáadnia a JQuery-t az Angular 2+ projekthez. De ha valamilyen okból kifolyólag szükséged lehet néhány JavaScript könyvtár használatára, akkor tudnod kell, hogyan kell ezeket Angular nyelven használni. Kezdjük tehát nulláról.
Megyek hozzá underscore.js projekttel és megmutatja, hogyan működik.
1. Hozzon létre egy új projektet az Angular CLI használatával
Ha még nem telepítette a CLI-t a számítógépére, telepítse azt. A telepítés után hozzon létre egy új projektet (ha még nem rendelkezik ilyennel).
új tanulás
Most lesz egy új Angular projekted, „ tanulás ” néven.
2. Telepítse a csomagot a projektjébe
Menjen az imént elkészített projekthez:
cd tanulás
Használja a kívánt csomagkezelőt a használni kívánt könyvtár telepítéséhez; npmTelepíteni szoktam underscore.js.
npm telepítés - aláhúzás mentése
3. Importálja a könyvtárat az Angular (TypeScript) fájlba
Kódot írunk TypeScript-be, és be kell tartanunk annak szabályait. A TypeScript-nek meg kell értenie underscore.js.
Mint azt talán tudhatod, a TypeScript egy tipizált JavaScript-készlet, amely egyszerű JavaScript-re áll össze. A TypeScript-nek megvan a maga szintaxisa, függvénye és a változóknak lehetnek meghatározott típusai. De amikor külső könyvtárat, például aláhúzást fogunk használni, deklarálnunk kell a TypeScript típusdefinícióit.
A JavaScript-ben az argumentumok típusa nem fontos, és a kódírás közben nem kap hibát. De a TypeScript nem engedi, hogy tömböt adjon egy olyan függvénynek, amely elfogadja a karakterláncot bemenetként. Akkor itt a kérdés: írjuk-e át a underscore.jsTypeScript-be, és definiáljuk a típusokat?
Természetesen nem - A TypeScript deklarációs fájlokat (* .d.ts) biztosít, amelyek meghatározzák a típusokat és szabványosítják a JavaScript fájlokat / könyvtárakat a TypeScript számára.
Néhány könyvtár tartalmaz egy gépelési fájlt, és nem kell telepítenie a TypeScript típuscélját. De ha egy könyvtárnak nincs .d.tsfájlja, telepítenie kell.
Csak meg kell találnunk és importálnunk kell a underscore.jstípusdefiníciós fájlt. Azt javaslom, hogy a Type Search segítségével keresse meg a szükséges könyvtárak deklarációs fájlját.
Keressen rá underscorea Type Sceach kifejezésre, és átirányítja a teljes típusokat / aláhúzásokat. Telepítse a deklarációs fájlt a következő paranccsal:
npm install --save @types/underscore
4. Típusdeklaráció importálása az Angular alkalmazásba
Tegyük fel, hogy aláhúzást fog használni a app.component.tsfájljában. Nyissa app.component.tsmeg az IDE által, és adja hozzá a következő kódot a fájl tetejéhez:
import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/ Az alkatrészben található TypeScript most már érthető _és könnyen működik, ahogy az várható volt.
Kérdés: Hogyan lehet használni a könyvtárat, amelynek nincs típusdefiníciója (* .d.ts) a TypeScript és az Angular formátumban?
Hozza létre, ha a src/typings.d.tsnem létezik. Ellenkező esetben nyissa meg, és adja hozzá a csomagját:
declare var A TypeScript-ben most a megadott néven kell importálnia:
import * as yourPreferedName from 'yourLibrary';yourPreferedName.method(); Következtetés
Összegezve készítsünk egy egyszerű példát, amelyre egy működő példa látható _. Nyissa meg app.component.tsés az appComponentosztályon belül írjon egy a-t, constructoramely az aláhúzás _.last()függvényével adja vissza a tömb utolsó elemét :
... 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 } } Ha most megnyitja az Angular alkalmazást, bejut 5a konzolba, ami azt jelenti, hogy helyesen adhatunk hozzá underscoreprojektünket, és az a várakozásoknak megfelelően működik.
Bármely JavaScript könyvtárat hozzáadhat a projekthez, csak ugyanazokat a lépéseket követve.
Kövess engem további cikkekkel kapcsolatban a technológiáról és a programozásról.