Podłączanie zewnętrznej biblioteki do projektu (wtyczka Apaczka z mapą wyboru paczkomatu)

Witam.
Potrzebuje nakierowania jak podłączyć wtyczkę z mapą Dokumentacja Web API ver. 2 - Integracja mapy do Angulara?

Wiem, że nie mogę wrzucić do angular.json linku do pliku js, więc pobrałem zawartość. Na tę chwilę mam tak

"scripts": [
  {
    "input": "src/apaczka.map.js",
    "inject": true, // false czy true - nie znaczenia w tym przypadku
    "bundleName": "apaczka"
  }

W komponencie próbuje importować js'a

import { ApaczkaMap } from 'apaczka';

Dostaje błąd

Cannot find module 'apaczka' or its corresponding type declarations.

Domyślam się, że plik apaczka.map.js nie zawiera żadnego typowania, które są potrzebne w TypeScripcie, bo takie rzeczy przecież nie kompilują się do javascriptu.

I spróbowałbym ~~dwóch~~~ trzech rozwiązań, które mogą pomóc

1. W ustawieniach tsconfig.json trzeba ustawić opcję allowJs na true (https://www.typescriptlang.org/tsconfig#allowJs)

2. Stworzyć ręcznie, pobrać z jakiegoś źródła lub wygenerować przez jakieś narzędzie (https://github.com/Microsoft/dts-gen) plik .d.ts związany z tym kodem js, który będzie zawierał wszystkie potrzebne typy

EDIT:

3. Jeśli masz ten plik w katalogu src to spróbuj go zaimportować w inny sposób, nie przez angular.json tylko odwołać się do pełnej ścieżki bezpośrednio w pliku

import { ApaczkaMap } from './apaczka.map.js';

/*
 * lub gdyby był jakiś problem z importem
 * import * as ApaczkaMap from './apaczka.map.js'
 * wtedy możemy od razu zaimportować cały plik
 */

console.dir(ApaczkaMap);

+ trzeba połączyć tą metodę z punktem 1 lub 2.

Wszelkiego rodzaju importy "nie działają",

import { ApaczkaMap } from 'src/apaczka.map.js';
// lub
import * as ApaczkaMap from 'src/apaczka.map.js'

Dostaje błąd Could not find a declaration file for module 'src/apaczka.map.js'.. Plik jest tam gdzie powinien być.

Co ciekawe, zostawienie dopisku w angular.json i wpisanie w komponencie declare var ApaczkaMap: any; działa...

Wtedy na guziku wywołuje

  // na samej górze 
  declare var ApaczkaMap: any;
  
  selectDeliveryPoint() {
    const appId = 'my_secret_app_id';
    let apaczka = new ApaczkaMap({
      app_id: appId,
      onChange: (record: any) => {
        if (record) {
          this.selectedPoint = record.foreign_access_point_id
        }
      }
    });
    apaczka.setSupplier('INPOST');
    apaczka.setFilterSupplierAllowed(['INPOST'])
    apaczka.show({});
  }

Czy to tak powinno działać? Przypominają mi się czasy jQuery, gdzie chyba też takie zabiegi trzeba było robić, pomijając fakt po co komu jQuery w Angularze...

Kolega wyżej napisał, próbujesz użyć JS w TS... więc TS tego nie skompiluje bo NIE MA typów, ani deklaracji typów ( przy kompilacji po prostu dołączy kod js do wynikowego swojego JS'a przez flagę allowJs), więc nie wie jakie są typy, dlatego musisz robić declare type, na tym obiekcie żeby móc z niego korzystać.

co do samego declare... za używanie any powinni palić na stosie :) A tak na serio postaraj się chociaż zrobić sobie typy na funkcje z których będziesz korzystać, dzięki temu i podpowiadanie składni będzie Ci działać i kod będzie czytelniejszy, będzie wiadomo czego oczekiwać.

Chyba, aż tak daleko nie doszedłem w Angularze. Raczej wszystko było out of the box i nie potrzebowałem takich "głupot" robić. Skoro biblioteka apaczka.map.js nie ma typów potrzebnych dla TS, to ustawiłem any i wiem, nie po to jest TS żeby wszędzie wciskać any, ale w tym przypadku kompletnie nie wiem jak "dopisać" te typy...

Mogę prosić o jakiś link, nakierowanie jak przygotować taką bibliotekę JS pod TS pod Angular? To się na bank przyda na przyszłość.

Xarviel napisał(a):

2. Stworzyć ręcznie, pobrać z jakiegoś źródła lub wygenerować przez jakieś narzędzie (https://github.com/Microsoft/dts-gen) plik .d.ts związany z tym kodem js, który będzie zawierał wszystkie potrzebne typy

Lub samemu spróbować samemu go utworzyć
https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

AdamWox napisał(a):

Wtedy na guziku wywołuje

  // na samej górze 
  declare var ApaczkaMap: any;
  
  selectDeliveryPoint() {
    const appId = 'my_secret_app_id';
    let apaczka = new ApaczkaMap({
      app_id: appId,
      onChange: (record: any) => {
        if (record) {
          this.selectedPoint = record.foreign_access_point_id
        }
      }
    });
    apaczka.setSupplier('INPOST');
    apaczka.setFilterSupplierAllowed(['INPOST'])
    apaczka.show({});
  }

Zrobiłeś coś takiego

declare var ApaczkaMap: any;

i to jest mniej więcej tak, jakbyś mówił kompilatorowi "Słuchaj zmienna ApaczkaMap jest prawidłowa, ale nie wiem co może w niej dokładnie być, więc traktuj ją jakby była dowolnego typu" i tak ją zaczął traktować, dlatego zniknął ten wcześniejszy komunikat.

Jeśli chcesz to możesz bardziej to rozbudować i wyodrębnić całą deklarację do osobnego pliku (zazwyczaj z rozszerzeniem .d.ts https://stackoverflow.com/questions/21247278/about-d-ts-in-typescript)

declare module 'apaczka' {
  declare class ApaczkaMap {
    constructor(...);
    
    setSuppler(...): ...;
    
    show(...): ...;
    
    setFilterSupplierAllowed(...): ...;
  }
}

// Powinno to wyglądać mniej więcej tak, ale nie mam 100% co do składni pewności, bo zazwyczaj można pobrać gotowe
// typy z npm'a i nie trzeba ich samemu pisać.

// Jeśli wszystko jest dobrze to Wtedy wystarczy zaimportować w taki sposób
// import { ApaczkaMap } from 'apaczka';

EDIT:

W tym repozytorium na githubie (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types) możesz podejrzeć kilka przykładów jak to działa w praktyce, bo z tej listy korzysta npm podczas instalacji np npm install @types/react