Integrating TypeScript types with an external library

Recently, I encountered an issue with an external library that doesn't have types. The code snippet looks something like this:

var method1 = require('./method1');
var method2 = require('./method1');

module.exports = {
   method1: method1,
   method2: method2
}

To address this, I created a directory named "typings/lib-name" and added "typings" in typeRoots. Inside this folder, there is an index.d.ts file with the following content:

declare module "lib-name" {
  import { Method1Interface, ... } from "./modules/method1.d.ts";
  import { Method2Interface, ... } from "./modules/method2.d.ts";

  export {
    Method1Interface,
    Method2Interface,
    ...
  }
}

However, when I attempted to use it in my code:

import lib from "lib-name"

lib.method1()

I encountered this error:

TS2339: Property 'method1' does not exist on type 'typeof import("lib-name")'
. As a beginner in TypeScript, I would appreciate some guidance on where I might have gone wrong.

EDITED I made some changes by adding a default export in the module:

declare module "lib-name" {
  import { Method1Interface, ... } from "./modules/method1.d.ts";
  import { Method2Interface, ... } from "./modules/method2.d.ts";

  export {
    Method1Interface,
    Method2Interface,
    ...
  }

  default export {
   method1: Method1Interface 
  }
}

Unfortunately, after this modification, method1 ended up having the type 'any', which is confusing to me.

EDITED2 I managed to resolve the issue by defining the methods before the default export:

declare module "lib-name" {
  import { Method1Interface, ... } from "./modules/method1.d.ts";
  import { Method2Interface, ... } from "./modules/method2.d.ts";

  const method1: Method1Interface;
  const method2: Method2Interface;

  export {
    Method1Interface,
    Method2Interface,
    ...
  }

  default export {
   method1,
   method2
  }
}

Answer №1

The issue I was facing has been resolved now. To fix it, I made sure to have a default export in place. It's important to note that the default export should not be structured like this:

default export {
  method1: Method1Interface
}

To solve the problem, I rearranged my code so that method1 is defined before the default export declaration. This adjustment helped resolve the issue I was encountering.

declare module "lib-name" {
  import { Method1Interface, ... } from "./modules/method1.d.ts";
  import { Method2Interface, ... } from "./modules/method2.d.ts";

  const method1: Method1Interface;
  const method2: Method2Interface;

  export {
    Method1Interface,
    Method2Interface,
    ...
  }

  default export {
   method1,
   method2
  }
}

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

Minimum value in Highcharts with category axis

I'm attempting to format the axis of my chart to match this style: https://i.sstatic.net/nLVVb.png In this design, the numbers are positioned above the line with a space before the plotbands. My current efforts are reflected in this fiddle: https: ...

The if-else condition is creating issues with the functionality of the buttons

Update #1 - Enhanced query, fresh functional link. Live site: The challenge at hand revolves around an if-else statement related to the form buttons on the right-hand column of the webpage. Scroll past the header and navigation to witness the issue in ...

failure of pipe during search for art gallery information

Hi, I've created a filter pipe to search for imagenames and imageids among all my images. However, it seems to only find matches in the first image. There seems to be something wrong with my code. This is my FilterPipe class in filter.pipe.ts where I ...

Store the advertisement click into the database utilizing PHP, subsequently access the provided hyperlink

I am developing a custom WordPress widget that displays advertisements. I want to track clicks on these ads and store the data in a database. The database table for click tracking is already set up, and I have a function called f1_add_advert_click($advert ...

There seems to be an issue with the OpenAPI generator for Angular as it is not generating the multipart form data endpoint correctly. By default

Here is the endpoint that needs to be addressed: @PostMapping(value = "/file-upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE) public List<FileReference> handleFileUpload( @RequestPart(value = "file", name = "f ...

Ways to conceal a div during the page loading process that is located in a separate PHP file

I am working with a PHP file that contains multiple PHP and JavaScript files being included. Within the AJAX .done(function(){ }) function, I am reloading my main page which includes all other files. The question is, how can I hide the div element inside a ...

Unable to activate slideToggle due to malfunctioning links

When using the slideToggle function, I encountered an issue where the links are not functioning properly. Check out my demo site at the following link: Here is my script: $(".nav li > a").click(function(e) { $(this).parent().siblings().find(&a ...

What is the functionality behind object inheritance using the clone() method in this implementation?

I am currently exploring kangax's blog post titled Why ECMAScript 5 still does not allow subclassing an array. In this article, he introduces a unique approach to subclassing that deviates from the traditional prototypal method. BaseClass.prototype = ...

The formset's submit button fails to function properly when it is dynamically created through ajax requests

In order to update my models, I am using a formset and displaying forms based on the search query. I have an ajax keyup function that sends post requests to generate search_results.html, which is then passed into search.html. However, when I dynamically g ...

I am interested in integrating drawing functionality (utilizing html5 canvas) into a video component within a react

In my basic React application, I have incorporated two features: a video tag for playing video content and a pen tool created with HTML5 canvas. My goal is to enable drawing on the video using the pen tool. Please review my code snippet below: const App = ...

Creating functions within the $scope that do not directly access the $scope object

tag, I am looking to create a $scope function that specifically manipulates the variables it receives. To test this functionality, I have set up a Plunker available at http://plnkr.co/edit/BCo9aH?p=preview. In my setup, there is an ng-repeat loop that lis ...

Guide to filling a dropdown menu by aligning with the text it contains?

I've set up two dropdown select boxes below that are exactly the same: HTML <select id="ddl1" name="ddl1"> <option value="1">TEXT 1</option> <option value="2">TEXT 2</option> <option value="3">TEXT 3&l ...

What is the best method for keeping two properties in a Typescript object in sync in a flexible manner?

I am looking to illustrate the concept that a property of an object is "in sync" with another property within the same object. Consider a hypothetical type called Widget, which represents a UI component storing a specific data type. type Widget = { id: ...

Instead of using a checkmark, consider using step numbers with Mui Stepper's Completed StepIcon

I'm currently utilizing Mui Stepper from [email protected] within a React project. Despite my efforts to search on platforms like Stackoverflow and Github, I have been unable to find a solution for displaying the step number upon completion inst ...

Prevent the end of the scroll from causing a new scroll to start?

In the code snippet provided, there are two divs. When scrolling down past the end of the blue div, the overall body/div also scrolls down. Is there a way to prevent this additional scrolling effect once reaching the scroll boundary of the blue div? For e ...

Create a variable to serve as a key within an Array

Encountering an issue with initializing an array while using the ngx-gauge library to display gauges in my application. One of the attributes is thresholds, which determines three different colors based on the value. For example: thresholds = {'0&apos ...

Having trouble updating the ASP Dropdown that has list items added through a jQuery AJAX call? Keep receiving the error message "Invalid postback or callback"?

I encountered a simple problem that I ended up complicating. In my web application, I have an ASP Dropdown that I want to populate with values from the database. To achieve this, I used jquery and Ajax to dynamically add list items to the dropdown successf ...

Angular Alert: [$injector:modulerr] Unable to create the angularCharts module because: Error: [$injector:nomod]

Although this question has been asked multiple times, the standard solutions provided did not resolve my issue. Therefore, I am sharing my code along with the error in hopes that it will be self-explanatory. Error: Uncaught Error: [$injector:modulerr] Fa ...

When React Router and Context fail to cooperate

Trying to transfer data between sites has posed a challenge for me. To address this, I opted to utilize React Context by setting up a high-level Context named DataContext. However, the dashboard in use also relies on React Router. How can I successfully ...

Using jQuery to dynamically include option groups and options in a select box

Generate option groups and options dynamically using data retrieved via AJAX. <select name="catsndogs"> <optgroup label="Cats"> <option>Tiger</option> <option>Leopard</option> <option>Ly ...