I'd like to know the location of the SelectorEvent definition and the proper way to import it for type-checking

In my current project, I have implemented the following code snippet to create a select interaction, integrate it into a map, and execute certain actions when a feature is selected or deselected:

const select: Select = new Select({
  hitTolerance: 5,
  multi: false,
  condition: singleClick
});
this.map.addInteraction(select);


select.on('select', (se: SelectEvent) => {
  console.log('select fired: ', se);
  // carry out operations using se...
});

The challenge I am facing is that I am utilizing TypeScript and aiming to fully leverage type-checking, but I am unsure about how to import SelectEvent. As a result, the code mentioned above does not pass type-checking and displays the error:

`TS2304: Cannot find name 'SelectEvent'`

When trying:

import {SelectEvent} from 'ol/interaction';

I encounter:

TS2305: Module '"../../../node_modules/@types/ol/interaction"' has no exported member 'SelectEvent'.

Examining the OpenLayers segment of my package.json reveals:

$ npm ls --depth=0 | grep -i ol | grep -v polyfill
├── @siedlerchr/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f1fcf5e0f6a8eae9a8e0fdf1c5b4abb5abb5">[email protected]</a> (git+https://github.com/Siedlerchr/types-ol-ext.git#ec995982b2ba7aa4d415e67a350ec4b9f841ea37)
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47282b077169736975">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9291bdcbd3c9d3ce">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7271307865695d2e332c332c28">[email protected]</a>

Upon searching for the SelectEvent type, I came across:

node_modules/@types/ol/interaction/Select.d.ts:declare class SelectEvent extends BaseEvent {

.. yet I'm uncertain about how to correctly import this declaration (as it doesn't appear to be exported initially).

typescriptopenlayersopenlayers-6

Answer №1

Upon inspecting with grep, you will find that:

node_modules/@types/ol/interaction/Select.d.ts:declare class SelectEvent extends BaseEvent

The above code snippet is found in 

node_modules/@types/ol/interaction/Select.d.ts
:

    export class SelectEvent extends Event {
        constructor(type: SelectEventType, selected: Feature[],deselected: Feature[], mapBrowserEvent: MapBrowserEvent);
        deselected: Feature[];
        mapBrowserEvent: MapBrowserEvent;
        selected: Feature[];
    }

To resolve the issue, you simply need to import it directly from there, like this:

import { SelectEvent } from "ol/interaction/Select";

This should address your problem effectively.

Furthermore, there is a valuable support available on another dedicated stack exchange community, specifically tailored for spatial software engineering inquiries and discussions.

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

The conflict arises when importing between baseUrl and node_modules

I am currently working on a TypeScript project with a specific configuration setup. The partial contents of my tsconfig.json file are as follows: { "compilerOptions": { "module": "commonjs", "baseUrl": &quo ...

javascriptnode.jstypescriptnpmstripe-payments

Using the className prop in React with TypeScript

How can the className prop be properly typed and utilized in a custom component? In the past, it was possible to do the following: class MyComponent extends React.Component<MyProps, {}> { ... } and then include the component using: <MyCompone ...

reactjstypescript

Using the HTTP Post method to retrieve a file object: a step-by-step guide

Is there a way to utilize a http POST request in order to retrieve a file object? Though the uploading of files to the server using the POST request seems successful and flawless, attempting to fetch the file results in an unusual response: console output ...

angularhttptypescriptpost

Tips on preventing the need for null or undefined checks in JS/Typescript singletons that have an initialization function

Is there a way to streamline the process of handling props in an Object literal that is dynamically initialized only once? I'm looking for a pattern that would eliminate the need for repetitive null/undefined checks and throw errors when certain metho ...

javascripttypescriptdesign-patternssingletoncoding-style

Sending a parameter to a route guard

I've been developing an application that involves multiple roles, each requiring its own guard to restrict access to various parts of the app. While I know it's possible to create separate guard classes for each role, I'm hoping to find a mo ...

angulartypescriptangular2-routing

Improving type definitions in Typescript 2.6 using module augmentation leads to error TS2339: Property '' is not found on type ''

Currently utilizing the material-ui library version v1.0.0-beta. An update was released yesterday to v1.0.0-beta.28, however, the type definitions were not updated resulting in runtime errors while compilation remains successful. Encountering this error i ...

reactjstypescriptwebpackmaterial-uitypescript2.0

At what point are routed components initialized?

Here is a route setup I am working with: path: ':id', component: ViewBookPageComponent }, After adding this route, an error keeps popping up: Error: Cannot read property 'id' of null I haven't included a null check in the compo ...

javascriptangulartypescript

What is the best way to ensure that my variable updates whenever its reference changes?

Having trouble updating an Angular2 component's variable that is tied to a variable in another service? You're not alone. I've been struggling to get it to update without constantly resetting the variable. In my component, I have the follow ...

typescriptangularpass-by-referenceobservable

Retrieve the object property based on an array of indices

I am looking to create a function that can retrieve a specific property of an object based on an array of property names const getObjectProperty = (arr: string[], object: any) { // This function should return the desired object property } Expected Outco ...

javascriptarraysjsontypescriptobject

Error encountered in sending server response to WhatsApp API cloud using webhooks in Node.js due to Typescript

Can you assist me with my issue? I'm developing an API using TypeScript and Node.js Express, utilizing Meta for WhatsApp API cloud usage. I've set up a webhook following the official documentation, but I'm facing an issue with conditional i ...

node.jstypescriptexpresswebhookswhatsapi

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...

htmlcssangulartypescript

Is NGX Extended Pdf Viewer the Ultimate Solution for Acrofields?

Can a universal solution be developed for PDF Forms? The example in the documentation suggests this, but the acrofield names and their quantities are already known here public firstName = 'Jane'; public lastName = 'Doe'; public country ...

angulartypescriptngx-extended-pdf-viewer

Experiencing a useContext error when implementing MDX with NextJS 13

I am currently working on integrating mdx files into Next.js 13. After completing all necessary configurations in next.config and creating the file structure, I have the following path within the app folder: > docs > components > accordion > pa ...

reactjstypescriptnext.jsmdxjs

Unable to access this context in Firefox debugger after promise is returned

I'm curious as to why the 'this' object is not showing up in the debugger in Firefox, but it does appear in Chrome's debugger. When I try to access 'this.myProperty', it shows as undefined. This is the code from my TypeScript ...

javascripttypescriptfirefox

How can you utilize Angular Signals in combination with HostBinding to dynamically update styles?

Within a component called app-test, the following code is present: @Input({ transform: booleanAttribute }) reverse: boolean = false; @HostBinding('style.flex-direction') direction: string = this.reverse ? 'column-reverse' : &ap ...

javascriptangulartypescriptangular-signals

Ways to extract information from an Object and save it into an array

In my Angular2 project, I am working on retrieving JSON data to get all the rooms and store them in an array. Below is the code for the RoomlistService that helps me fetch the correct JSON file: @Injectable() export class RoomlistService { constructor( ...

javascriptarraysjsonangulartypescript

Having trouble getting into my own Hook with Next.js to access the localStorage

My goal is to create a hook that can store User credentials such as authToken. I attempted to save the user data to localStorage by creating a custom hook for this purpose. Unfortunately, when compiling my code, I encountered an error stating that window i ...

reactjstypescriptnext.js

Impact when returning a React.FC Component

Using React, I have encountered a challenge with my site: I have a function that generates a Card component displaying information about my store's products (#1). To display this on the screen, I map through the array returned by the backend and pass ...

javascriptreactjstypescriptreact-hooks

What is the best way to customize the styles of Material UI V5 Date Pickers?

Attempting to customize Mui X-Date-Pickers V5 through theme creation. This particular component is based on multiple layers. Interested in modifying the borderColor property, but it's currently set on the fieldset element, so need to navigate from Mu ...

javascriptreactjstypescriptmaterial-ui

Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

I am working on a project where I need to repeat a card multiple times using ngFor. Since the number of cards will vary each time the page loads, I want to use virtual scrolling to handle any potential overflow. However, I have been struggling to get it ...

javascriptangulartypescriptionic2