Error message TS2339 in Typescript: The property '__super__' is not found on the type '($element: any, options: any) => any'

Having trouble with Javascript code inside typescript.

$.fn.select2.amd.require([
    'select2/data/array',
    'select2/utils'
    ], function (ArrayData, Utils) {
      /* tslint:disable */
        function CustomData ($element, options) :any {
            CustomData.__super__.constructor.call(this, $element, options);
        }
      /* tslint:enable */
        Utils.Extend(CustomData, ArrayData);

        CustomData.prototype.query = function (params, callback) {
          var result =  ymaps.suggest(params.term).then(function (items) {
          var data = [];
          var output = {
            results : [],
            more : false
          };
            for (var index = 0; index < items.length; ++index) {
                data.push({
                  id: String(items[index]['displayName']),
                  text: items[index]['displayName'],
                })
            }
            output.results = data;
            callback(output);
          });                
        };

        $("#basic").select2({
            width:"100%",
            closeOnSelect:false,
            dataAdapter: CustomData
        });
        $('#basic').on('select2:select', function (e) {
          console.log(e);
          $('span.select2-search.select2-search--dropdown > input').val($("#basic").val());
        });
    });

An error occurs when running ng build:

ERROR in src/app/car/car-create/car.component.ts(43,28): error TS2339: Property '__super__' does not exist on type '($element: any, options: any) => any'.

Looking for a solution to this issue. Tried declaring var CustomData: any; and adding /* tslint:disable */ before the class export line.

Answer №1

Did you attempt to convert the CustomData object to type any?

(<any>CustomData).__super__.someprop...

Alternatively, you can create a function interface for CustomData (I have not tested this)

Here is a sample of how the function interface could look:

interface CustomDataFunction {
    (this: any, $element: any, options: any): any;
    __super__: any;
}

var CustomData: CustomDataFunction = <CustomDataFunction>function ($element, options): any {
    CustomData.__super__.constructor.call(this, $element, options);
}

CustomData.prototype....

You can customize the interface with specific properties and types instead of using any.

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

Even after the component is destroyed, the subscription to the service observable continues to emit

I'm facing an issue with an observable in my service. The provided code below demonstrates this: @Injectable({ providedIn: 'root' }) export class MyService { public globalVariable: BehaviorSubject<string> = new BehaviorSubject(&ap ...

Issue with Moment Js: Unable to change date with time zone function

Trying to convert a UTC date and time to local time ("Europe/Paris") using moment's timezone function, but encountering issues. The code I am using is: var m = moment.tz(this.startTime, 'Europe/Paris'); this.startTime = m.format("YYYY-MM-DD ...

Creating a contravariant function member in TypeScript?

I am facing a challenge with a class that contains a member which is a function taking an instance of the same class: class Super { public member: (x: Super) => void = function(){} use() {const f = this.member; f(this)} } However, I need the me ...

Tips for customizing the color of a leaflet-routing-machine marker

I'm currently utilizing the leaflt-routing-machine plugin, and I'm looking to alter the color of markers from blue to red. Any ideas or suggestions on how to achieve this?! ...

Sorting an array of objects in TypeScript may result in a type error

My data includes various categories, ages, and countries... const data = [ { category: 'Fish', age: 10, country: 'United Kingdom' }, { category: 'Fish', age: 9, country: 'United Kingdom' }, { category: ...

Is there a method of converting React components into strings for manipulation?

In my React TypeScript project, I am utilizing a crucial library that contains a component which transforms text into SVG. Let's refer to this library component as <LibraryRenderer />. To enhance the functionality, I have enclosed this componen ...

What is the correct way to refer to "this" within an Angular2 component template?

I'm working with an Angular2 component that looks like this: class A { filter(..) } Within the template for A, I have <.. list | pipe:filter ..> The issue arises when I call filter inside of the pipe - I don't have access to "this" w ...

What impact does nesting components have on performance and rendering capabilities?

Although this question may appear simple on the surface, it delves into a deeper understanding of the fundamentals of react. This scenario arose during a project discussion with some coworkers: Let's consider a straightforward situation (as illustrat ...

Setting up button value dynamically according to dropdown selection in Angular 2

I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...

What is the best way to organize a material table with favorites prioritized at the top?

My goal was to customize the sorting of a mat-table in Angular, ensuring that the "favorite" items always appear at the top of the table. I aimed for the favorite items to maintain their position as the first items in the table regardless of any other sor ...

Is there a way to incorporate a loading spinner into a MaterialUI DataTable without having to specify a fixed height for the parent component?

Currently, I am using a MaterialUI DataTable with the following setup: <div style = {{height: 300}}> <DataGrid loading={true} getRowHeight={() => "auto"} getEstimatedRowHeight={() => 250} ...

Angular2: The definition of one or more providers for ... is missing: [?]

An error occurred: One or more providers for "AddressPage" were not defined: [?]. I have double-checked my code: @Injectable() export class NavService { .. } import {NavService} from '../../../providers/services/nav-service/nav-service'; @Com ...

React: The useContext hook does not accurately reflect the current state

I'm currently facing a dilemma as I attempt to unify data in my app. Whenever I click the button, the isDisplay value is supposed to be set to true; even though the state changes in my context file, it does not reflect in the app. Thank you for your ...

TypeScript struggling to recognize specified types when using a type that encompasses various types

I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...

When attempting to create a new page in Ionic 5, the error message "**An NgModule could not be located**" is being displayed

While attempting to create a page using ionic g page pages/first, I encountered the following error: Could not find an NgModule. Use the skip-import option to skip importing in NgModule. [ERROR] Could not generate page However, when I tried ionic g page s ...

Creating divs dynamically in a loop and displaying them upon clicking a button in Angular

I am trying to dynamically create divs in a loop and show the selected div when I press a specific button. In theory, this is how I envision it... <div>div1</div><button (click)="showDiv(divID)">showDIV</button> To hide a ...

React's Redux persist is causing a duplication of requests being sent

I am currently utilizing redux-persist along with Redux Toolkit. I have observed a peculiar behavior where, upon changing the slice (RTK), a request is sent to the server. When using redux-persist without a persister, only one request is made as expected. ...

TS: How can we determine the type of the returned object based on the argument property?

Assume we have the following data types type ALL = 'AA' | 'BB' | 'CC'; type AA = { a: number; }; type BB = { b: string; }; type CC = { c: boolean; }; type MyArg = { type: ALL }; I attempted to create a mapping between type n ...

A guide on resolving the issue with node module live-server by switching from using require('opn') to require('open')

While attempting to deploy to my AWS environment, I encountered an error in the nodejs.log. /var/app/current/node_modules/opn/index.js:11 const wslToWindowsPath = async path => { ^^^^ SyntaxError: Unexpected identifier ...

What is the reason behind TypeScript treating numbers as strings when adding them together?

Although TypeScript is strongly typed, can you explain why the code below outputs 12 instead of 3? function add_numbers(a: number, b: number){ return a + b; } var a = '1'; var b = 2; var result = add_numbers(<number><any>a, b) ...