Importing a class from a JavaScript file in Typescript: a step-by-step guide

Question

Importing a class from a JavaScript file in Typescript: a step-by-step guide

I need help with the following:

Importing a js file that defines a class: ./myClass/index.js
Declaring the public methods of MyClass (unsure of where to do this, whether in index.ts or another declaration file)
Creating a typescript file that exposes the class: index.ts

Here is an example of what I'm trying to achieve:

// index.ts
import MyClass from './myClass' // or require, or any other method that works
export {MyClass}

and

// myClass/index.js
export default class MyClass {
  ...
}

Unfortunately, this setup is not working as the import of ./myClass/index is unable to find the module.

I have attempted to create a ./myClass/index.d.ts file following an example from this resource, but I continue to encounter an Error: Cannot find module './myClass/index.js' at runtime :(

It seems like I may be missing some basic concepts in typescript, and I'm looking for clear resources to help me understand better.

Any suggestions or ideas?

javascript typescript typescript-typings typescript2.0

Answer 1

Answer №1

When working with JavaScript, there is no such thing as export default class. Instead, you can structure your JS file as follows: myClass/index.js

"use strict";
class MyClass {
  hello(name) {
    console.log(`Hello ${name}`);
  }

}
exports.default = MyClass;

To provide Type definitions, create a file named myClass/index.d.ts

export default class MyClass {
  hello(name: string): void;
}

Next, you can import it into your TypeScript code like this.

/// <reference path="./myClass/index.d.ts" />
import MyClass from "./myClass";

const myInstance = new MyClass();
myInstance.hello("World");

Answer 2

When working with JavaScript, there is no such thing as export default class. Instead, you can structure your JS file as follows: myClass/index.js

"use strict";
class MyClass {
  hello(name) {
    console.log(`Hello ${name}`);
  }

}
exports.default = MyClass;

To provide Type definitions, create a file named myClass/index.d.ts

export default class MyClass {
  hello(name: string): void;
}

Next, you can import it into your TypeScript code like this.

/// <reference path="./myClass/index.d.ts" />
import MyClass from "./myClass";

const myInstance = new MyClass();
myInstance.hello("World");

Answer 3

Answer №2

When wrapping up your JavaScript file, make sure to include the following:

exports.MyClass = MyClass;

For TypeScript files:

import * as  IzendaSynergy  from './izenda/izenda_ui.js';

or

import { IzendaSynergy } from './izenda/izenda_ui.js';

In your tsconfig.json file:

  "allowJs": true

Answer 4

When wrapping up your JavaScript file, make sure to include the following:

exports.MyClass = MyClass;

For TypeScript files:

import * as  IzendaSynergy  from './izenda/izenda_ui.js';

or

import { IzendaSynergy } from './izenda/izenda_ui.js';

In your tsconfig.json file:

  "allowJs": true

Importing a class from a JavaScript file in Typescript: a step-by-step guide

Answer №1

Answer №2

Similar questions

Display JSON values in sequence using Material-UI animations

Pattern matching: Identify text elements specifically within an HTML tag

Sails.js encounters issues initializing Passport.js when SSL is implemented

Is there a way to check if a user has previously visited a URL and automatically redirect them back to that page if they have

How do I utilize ng-repeat in Angular to pass a variable that specifies the number of repetitions?

Comparing Buffer and Uint8Array in Node.js

Struggling to dynamically access element IDs with JavaScript

Retrieve selected value from HTML input with datalist and use it as an argument in a method

Access the contents of MUI Modal (Dialog) even when it's closed

When the class name is identical, the click event appears to be malfunctioning

What exactly happens behind the scenes when JSON.stringify() is called?

Changing the location of an ArcGIS map with a click event in a Vue application

Is it possible to implement formvalidation.io in a React project that is using Materialize-css?

Tips for displaying an alert after a successful form submission and ensuring user input validation

Error: Access Denied - discord.js bot command cannot be executed due to lack of authorization

Can the combobox be used for organizing items?

Recommendations for organizing code with respect to models in Angular using TypeScript

Error: The function sendFile does not exist in the method res.status(...)

Tips for concurrently and asynchronously executing multiple AJAX requests

Ways to retrieve the innerHTML content in Mozilla Firefox