Having trouble with importing GeoJSON from @types/ol package

I am currently working with the following files:

tsconfig.json

{
    "compilerOptions": {
        "lib": [
            "es2019",
            "dom"
        ],
        "target": "es5",
        "module": "system",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "outFile": "bundle.js"
    },
    "files": ["index.ts"]
}

Package.json

{
  "name": "testol",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ol": "^5.3.3",
    "@types/ol": "^5.3.6"
  },
  "devDependencies": {
    "typescript": "^3.6.4"
  }
}

index.ts

import GeoJSON from 'ol/format/GeoJSON';
const geoJSON = new GeoJSON();

Upon running tsc --build tsconfig.json, I encounter several errors like

node_modules/@types/ol/format/GeoJSON.d.ts:1:10 - error TS2305: Module '"node_modules/@types/ol/format/GeoJSON"' has no exported member 'Feature'.
1 import { Feature, FeatureCollection, GeoJSON as GeoJSON_1, Geometry, GeometryCollection, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from 'geojson';
           ~~~~~~~

node_modules/@types/ol/format/GeoJSON.d.ts:1:19 - error TS2305: Module '"node_modules/@types/ol/format/GeoJSON"' has no exported member 'FeatureCollection'.
1 import { Feature, FeatureCollection, GeoJSON as GeoJSON_1, Geometry, GeometryCollection, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from 'geojson';
                    ~~~~~~~~~~~~~~~~~

What seems to be the issue here? I attempted to install an older version of @types/geojson as advised here

typescriptopenlayersgeojson

Answer №1

I was able to successfully make it work by utilizing the following configuration:

{
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "importHelpers": true,
        "declaration": false,
        "moduleResolution": "node",
        "outFile": "bundle.js"
    },
    "files": ["index.ts"]
}

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

Develop a chart and compute the total of each individual column

I am interested in creating a class library that can manage user inputs by allowing them to add columns in the UI with a column name and comma-separated values. My goal is to perform calculations with this data and display it in a data table. Specifically, ...

typescriptalgorithmsum

Best practices for managing data loading with composition API and onBeforeRouteUpdate

I have a Vue 3 single-page component that contains the following script: export default defineComponent({ props: { id: String, }, setup(props) { const error = ref<boolean>(false) const thisCategory = ref<CategoryDetails>() ...

typescriptvue.jsvue-routervuejs3reusability

Tips for preventing repetition of code in multiple entry points in Rollup

My goal is to use rollup to process a group of input files and generate multiple output files in the dist directory that all have some common code shared between them. Below is my current rollup configuration: import path from 'path'; import pat ...

javascripttypescriptoptimizationbundling-and-minificationrollupjs

Exploring the depths of Javascript objects using Typescript

If I have this specific dataset: data = { result: [ { id: '001', name: 'Caio B', address: { address: 'sau paulo', city: 'sao paulo', ...

javascriptjsontypescript

What is the process for adding custom text to create a .d.ts file using the TypeScript compiler?

In my endeavor to develop a javascript module using TypeScript that is compatible with ES5 browsers and NodeJs modules, I have encountered a dilemma. I wish to avoid using import and export in TypeScrtipt as it creates dependencies on SystemJS, RequireJS, ...

typescripttypescript-typings

Whenever a call to `http.put` is made, it is certain that

I am facing an issue with my form in Angular 2. When the user clicks on the submit button, I intend to send the data to a rest endpoint using the http module. Here is the structure of the form: <form novalidate [formGroup]="formGroup()" (ngSubmit)="sen ...

angulartypescript

Creating dynamic form groups in Angular 4

I am currently working on a dynamic form group and I am facing a particular challenge. https://i.sstatic.net/m20IO.png Whenever I click on "add more," it should add 2 dynamic fields. Here is the function I am using: onAddSurgeries(){ const control = ...

angulartypescript

React Redux not properly handling text input updates when onChange event is triggered

I have come across similar inquiries, but they haven't provided the solution I need. Currently, I am working on a React project where I am integrating redux. This is how my index.js looks: import React from "react"; import ReactDOM from "react-dom"; ...

reactjstypescriptreduxreact-redux

How Typescript allows variables to act as references to other variables

Imagine having a component with aliases for user data. This approach allows for shorter and cleaner variable names, making the code easier to read: @Component({ selector: 'my-view', templateUrl: './view.component.html', sty ...

angulartypescript

A special function designed to accept and return a specific type as its parameter and return value

I am attempting to develop a function that encapsulates a function with either the type GetStaticProps or GetServerSideProps, and returns a function of the same type wrapping the input function. The goal is for the wrapper to have knowledge of what it is ...

typescriptnext.js

Are you encountering issues with Google Analytics performance on your Aurelia TypeScript project?

I recently started using Google Analytics and I am looking to integrate it into a website that I'm currently building. Current scenario Initially, I added the Google Analytics tracking code to my index.ejs file. Here is how the code looks: <!DOC ...

typescriptgoogle-analyticsaurelia

The Angular Http Interceptor is failing to trigger a new request after refreshing the token

In my project, I implemented an HTTP interceptor that manages access token refreshing. If a user's access token expires and the request receives a 401 error, this function is designed to handle the situation by refreshing the token and re-executing ...

javascriptangulartypescripthttpinterceptor

Leverage Springs with TypeScript

function createDefaultOrder(items: any[]): number[] { return items.map((_, index) => index); } type CustomHandler<T> = (index: number) => T; type CustomValues = { zIndex: number, y: number, scale: number, shadow: number, immediate: ...

reactjstypescriptreact-hooksreact-spring

TestCafe has encountered an issue: "There are no tests available to run. This may be due to either the test files not containing any tests or the filter function being too

Attempting to run automated tests using TestCafe resulted in an error when executing the following command. testcafe chrome testc.ts The specified command was used to test the testc.ts file within my Angular application, with TestCafe installed globally ...

javascriptangulartypescriptautomated-teststestcafe

Regulation specifying a cap of 100.00 on decimal numbers entered into a text input field (Regex)

I have created a directive that restricts text input to only decimal numbers in the text field. Below is the code for the directive: import { HostListener, Directive, ElementRef } from '@angular/core'; @Directive({ exportAs: 'decimal ...

javascriptregexangulartypescript

The node version in VS Code is outdated compared to the node version installed on my computer

While working on a TypeScript project, I encountered an issue when running "tsc fileName.ts" which resulted in the error message "Accessors are only available when targeting ECMAScript 5 and higher." To resolve this, I found that using "tsc -t es5 fileName ...

node.jstypescriptvisual-studio-code

Intellisense capabilities within the Gruntfile.js

Is it a feasible option to enable intellisense functionality within a Gruntfile? Given that 'grunt' is not defined globally but serves as a parameter in the Gruntfile, VSCode may interpret it as an unspecified function parameter 'any'. ...

gruntjstypescriptintellisensevisual-studio-code

Understanding the connection between two unions through TypeScript: expressing function return types

Within my codebase, I have two unions, A and B, each with a shared unique identifier referred to as key. The purpose of Union A is to serve as input for the function called foo, whereas Union B represents the result yielded by executing the function foo. ...

typescript

The application's functionality is interrupted when router.navigate() is called within the .subscribe method

I am having an issue with user navigation on my application. After successfully signing in, users get redirected to the home page (/), but they are unable to navigate by clicking any links on that page. Upon further investigation, I discovered that moving ...

angulartypescript

The vue3-openlayers view remains consistently positioned at the bottom of the page

My perspective has shifted as illustrated below It seems like there is some padding within the view inside the map container causing the shift If I drag the map upwards, it disappears, but dragging it downwards keeps it visible I have custom controls at ...

vue.jsopenlayers