Create a .d.ts file for a custom JavaScript file

Question

Create a .d.ts file for a custom JavaScript file

I am working on an application written in JavaScript and considering incorporating TypeScript for a new feature. Currently, I have a base class defined in JavaScript as shown below:

// base.js

module.exports = function BaseClass () {
    // ... ...
};

My goal is to create a class in TypeScript that extends this base class like so:

// sub.ts
import Base from "./base.js";
class Sub extends Base {
    // ... ...
}

However, upon implementing this, I encountered an error in sub.ts stating:

Type "Base" is not a constructor function type.

I am curious as to why this error is occurring. Could it be due to the absence of a .d.ts file for my base.js? If that's the case, how can I generate the necessary declaration file for base.js and where should I place it?

typescript definitelytyped

Answer 1

Answer №1

Could the absence of a .d.ts file for my base.js be causing this issue?

Absolutely.

If that's the case, how can I generate the necessary definitely typed file for base.js?

Simply create base.d.ts:

declare class Base {
}

Where should this file be placed?

Right next to base.js.

Answer 2

Could the absence of a .d.ts file for my base.js be causing this issue?

Absolutely.

If that's the case, how can I generate the necessary definitely typed file for base.js?

Simply create base.d.ts:

declare class Base {
}

Where should this file be placed?

Right next to base.js.

Answer 3

Answer №2

Here is a complete example, inspired by @basarat's solution:

// data.js
var information = {
  "values": [
    {
      "value": "a",
    },
    {
      "value": "b",
    }
  ],
  "year" : 2018
  }

export { information }

export declare class information {
    static values : any[];
    static year   : number
}

// app.ts
import { information } from './data.js';

// data.values.filter() // Autocompletion for Array methods should display in the IDE
// data.year.toFixed(1) // Autocompletion for Number methods should show in the IDE

Verified on an Angular 6 project using: TypeScript V2.9.2.

Answer 4

Here is a complete example, inspired by @basarat's solution:

// data.js
var information = {
  "values": [
    {
      "value": "a",
    },
    {
      "value": "b",
    }
  ],
  "year" : 2018
  }

export { information }

export declare class information {
    static values : any[];
    static year   : number
}

// app.ts
import { information } from './data.js';

// data.values.filter() // Autocompletion for Array methods should display in the IDE
// data.year.toFixed(1) // Autocompletion for Number methods should show in the IDE

Verified on an Angular 6 project using: TypeScript V2.9.2.

Create a .d.ts file for a custom JavaScript file

Answer №1

Answer №2

Similar questions

Angular2 and Typescript paired with Visual Studio 2013

What is the process for combining two interface declarations into a single interface?

Create objects in the gallery

React Formik - application triggers an undesired submission request when the Enter key is pressed in the input field

Having trouble moving to a different component in Angular?

Retrieve every item in a JSON file based on a specific key and combine them into a fresh array

Error Message: Angular Unit Test Fails with "Cannot read property 'subscribe' of undefined"In this article, we will

Creating a way for a Node and React application to share classes

Steer clear of using the non-null assertion operator while assigning object members

Modify animation trigger when mouse hovers over

TypeScript compiler encountering issue with locating immutable.js Map iterator within for of loop

Exploring JSON data in real-time

Utilizing a class structure to organize express.Router?

The observer error silently assumes an undefined type

What is the process for running a continuous stream listener in a node.js function?

Transform a standard array of strings into a union string literal in TypeScript

Unable to access the `isDragging` property in TypeScript when using the `useDrag` method from react-d

Unable to declare a string enum in TypeScript because string is not compatible

Is there a way for me to retrieve the text generated by OpenAI in the completion response?

Tips for sorting queries within a collection view in Mongoose: