Problem with extending a legacy JavaScript library using TypeScript

Can someone assist me with importing files? I am currently utilizing @types/leaflet which defines a specific type.

export namespace Icon {
    interface DefaultIconOptions extends BaseIconOptions {
        imagePath?: string;
    }

    class Default extends Icon<DefaultIconOptions> {
        static imagePath?: string;
        constructor(options?: DefaultIconOptions);
    }
}

Now, I am interested in using this library that expands on the Icon functionality: https://www.npmjs.com/package/leaflet-fa-markers. The problem is that it's written in plain JS and lacks a defined type in @types...

L.Icon.FontAwesome = L.Icon.extend({

    options: {
        popupAnchor: [0, -50]
    },

    createIcon: function () {

        var div = document.createElement('div');
...

Currently, I've imported both the js and css files in .angular-cli.json, however, I'm struggling with how to import it into my service. So far, I've only imported the js lib

import 'leaflet-fa-markers';
//...
        let marker = new L.Marker([ lat, lng], {
          icon: L.icon.fontAwesome({
            iconClasses: 'fa fa-info-circle', // you _could_ add other icon classes, not tested.
            markerColor: '#00a9ce',
            iconColor: '#FFF'
          }),
          draggable: true});

But I encounter the following error:

src/app/_services/canimap.service.ts (99,24): Property 'fontAwesome' does not exist on type '(options: IconOptions) => Icon<IconOptions>'.
angulartypescripttypes

Answer №1

In my experience, I have discovered that making slight changes to the code can help it function properly.

  1. Start by converting the JavaScript file into a TypeScript file.

  2. Next, add an import statement:

    import { Icon, IconOptions } from 'leaflet'; import * as L from 'leaflet';

    Create a new class called FontAwesomeIcon that extends the Icon class and add your custom JavaScript code inside.

  3. Include an index.ts file with the following content:

    export { FontAwesomeIcon, FontAwesomeOptions } from './fontAwesomeIcon';

You can view the updated code on GitHub: https://github.com/mylen/ngx-leaflet-fa-markers

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to omit type arguments in TypeScript when they are not needed?

Here is a function I am currently working with: function progress<T>(data: JsonApiQueryData<T>): number { const { links, meta } = data.getMeta(); if (!links.next) { return 1; } const url = new URL(links.next); return parseInt(url ...

typescript

Why is the getElement().getProperty("value") function not functioning properly?

I am facing an issue with reading a property in my web component. I am puzzled as to why it is not working correctly. I created a simple example, and after clicking the button, I expect to retrieve the value of the property, but it returns null. I am unsur ...

javatypescriptvaadinvaadin-flow

Issues with updating in Firebase real-time database using Angular 2 are not

I am currently working on a simple app that inserts new records into Firebase. Below the input field, the app lists the last 10 items in the database. ISSUE: I am facing a problem where I have to start inputting something in the input field or click on ...

firebaseangular

Struggling with TypeScript compilation in a Vue.js project? Encounter error code TS2352

Here is my code snippet from window.ts import Vue from 'vue' interface BrowserWindow extends Window { app: Vue } const browserWindow = window as BrowserWindow export default browserWindow Encountering a compilation error Error message: TS2 ...

typescriptvue.jswebpack

Using Typescript to Import One Namespace into Another Namespace

Is it possible to export a namespace from one typescript .d.ts file and then import that namespace into another .d.ts file where it is utilized inside of a namespace? For instance: namespace_export.d.ts export namespace Foo { interface foo { ...

javascripttypescriptnamespaces

Fixed headers remain in place as you scroll horizontally on a single table

Within my system, I have organized two tables: table one and table 2 are stacked on top of each other. I've managed to freeze the column headers so that they are displayed vertically, remaining static as users scroll horizontally. To achieve this effe ...

htmlcssangular

Angular SwitchMap is a powerful operator that allows you

I am currently utilizing the mat-table component from angular material, in conjunction with pagination features. Whenever a user inputs text into the search field, a filter method is activated to send the text, page size, and current page to the backend f ...

angulartypescriptdebouncingswitchmap

Gradual decline in content loading due to ngrx store actions with payloads

When dispatching actions to the store, there is a noticeable decrease in content load efficiency from http requests due to incremental deficiencies. Surprisingly, requests that do not involve store logic or handling the content of the http requests themsel ...

angularngrx-storengrx-effects

Calling a function within another function

In my code, I have a function that formats the price and retrieves the value needed for refactoring after upgrading our dependencies. I'm struggling with passing the form value to the amountOnBlur function because the blur function in the dependencie ...

javascripttypescriptcastingtype-conversiontypeerror

Running nestjs-console commands within an Angular/nx workspace environment can be easily achieved by following these steps

I have integrated a NestJS application within an Angular / Nx workspace environment. For running commands in the Nest application, I am utilizing nestjs-console (e.g., to load fixture data). As per the instructions in the nestjs-console documentation, th ...

angularangular-clinestjsnrwlnrwl-nx

Getting the PlayerId after a user subscribes in OneSignal with Ionic2

Currently working on an app with Ionic2 and facing a challenge with retrieving the player id after a user subscribes in order to store it in my database. Any suggestions on how I can retrieve the unique player id of OneSignal users post-subscription? ...

typescriptpush-notificationionic2onesignal

What is the proper way to send a list as a parameter in a restangular post request

Check out this code snippet I found: assignUserToProject(pid: number, selectedUsers: any, uid: number) { let instance = this; return instance.Restangular.all("configure/assign").one(pid.toString()).one(uid.toString()).post(selectedUsers); } ...

angularjstypescript

Dealing with router parameters of an indefinite number in Angular 5: A comprehensive guide

Is there a method to efficiently handle an unknown number of router parameters in a recursive manner? For instance: We are dealing with product categories that may have subcategories, which can have their own subcategories and so on. There are a few key ...

javascriptangulartypescriptangular-ui-routerfrontend

Tips for binding a dynamically generated array in ngModel while using ngFor for looping

I am facing an issue with binding an array dynamically in my component using ngModel. While one-way binding works fine, the model does not update when I make changes or add new elements to the array. Here is the HTML section: <div class="form-group ro ...

angularangular8

Why is it that TypeScript's flow analysis does not extend to the 'else' block?

Consider the code below: function f(x : number) { if (x === 1) { if (x === 2) {} // error } else { if (x === 1) {} // OK } } The compiler flags an error on x === 2. This is because if the code reaches this block, x must be ...

typescripttypesstatic-analysis

Can the PrimeNG p-fileUpload component be configured to launch from a specific directory?

Utilizing the PrimeNG p-fileUpload component for file uploads. Looking to customize the default folder that opens when the select file button is clicked. Would like it to open in a specific location such as Desktop or Videos. Is there a method to achieve ...

angulartypescriptprimeng

Error: Module not found - Unable to locate 'dropzone'

Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue: ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\imp ...

javascriptangulartypescriptsingle-page-applicationangular8

Why is my data not showing correctly? - Utilizing Ionic 3 and Firebase

I'm experiencing a challenge with displaying Firebase data in my Ionic 3 application. Below is the relevant snippet of code from my component where 'abcdef' represents a placeholder for a specific user key: var ref = firebase.database().ref ...

angulartypescriptfirebase-realtime-databaseionic3angularfire2

My component fails to load using Angular Router even though the URL is correct

I have been experiencing an issue while trying to load my Angular component using the router. The component never appears on the screen and there are no error messages displayed. app-routing-module { path: '', redirectTo: '/home', ...

javascriptangulartypescriptangular8

Can classes be encapsulated within a NgModule in Angular 2/4?

Looking to organize my classes by creating a module where I can easily import them like a separate package. Take a look at this example: human.ts (my class file) export class Human { private numOfLegs: Number; constructor() { this.numOfLegs = 2 ...

angulartypescriptng-modules