How to import js-modules into TypeScript file?

Question

I have a Protractor project which contains such a file:

var FriendCard = function (card) {
    var webElement = card;
    var menuButton;
    var serialNumber;

    this.getAsWebElement = function () {
        return webElement;
    };

    this.clickMenuButton = function () {
        menuButton.click();
    };

    this.setSerialNumber = function (numberOfElements) {
        serialNumber = numberOfElements + 1;
        menuButton = element(by.xpath('.//*[@id=\'mCSB_2_container\']/li[' + serialNumber + ']/ng-include/div/div[2]/i'));
    };

    this.deleteFriend = function () {
        element(by.css('[ng-click="deleteFriend(person);"]')).click();
        element(by.css('[ng-click="confirm()"]')).click();
    }
};
module.exports = FriendCard;

Path to the file is ./pages/FriendCard.js.

I have no problems with its import to another file using require():

var FriendCard = require('./../pages/FriendCard');

So, I've decided to import this file to the TypeScript file just like that:

import {FriendCard} from './../pages/FriendCard'

I'm using WebStorm. It tells me that (TS2305) it has no exported member 'FriendCard'.

Maybe I have to configure tsconfig.json file somehow, but I still don't know how it works. Could you help me?

"I'm using WebStorm, so it tells me, that (TS2305) it has no exported member 'FriendCard'." Just a small note -- TS2305 means that the warning/error is produced by actual TypeScript compiler/language service and not actual WebStorm .. as IDE does not use such numbering in their own inspections/parsers. — LazyOne
– LazyOne, Commented Dec 19, 2016 at 11:15

Ram Pasala · Accepted Answer · 2021-05-04 15:14:18Z

203

You can import the whole module as follows:

import * as FriendCard from './../pages/FriendCard';

For more details please refer the modules section of Typescript official docs.

Recent Updated Solution : We need to tweak the tsconfig.json to allow JS modules import. credits to @paulmest, @ben-winding @crispen-gari solutions below.

{
  "compilerOptions": {
    "allowJs": true
  }
}

edited May 4, 2021 at 15:14

answered Dec 19, 2016 at 10:36

Ram Pasala

5,2613 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roman Over a year ago

Thanks for articulating "./" in front of the actual relative path. This makes all the difference in path resolution at the compile time.

Nathan H Over a year ago

Is this up to date? I still get the same error... Could not find a declaration file for module ...

PaulMest Over a year ago

@nathan-h You probably need to modify the tsconfig file... more info here: stackoverflow.com/a/56909179/872328

Dimitri Kopriwa Over a year ago

This worked and is up to date with latest ts version as of today, but now typescript try to validate those file, I don't need any error on those...

PaulMest · Accepted Answer · 2021-02-11 19:32:19Z

87

I'm currently taking some legacy codebases and introducing minimal TypeScript changes to see if it helps our team. Depending on how strict you want to be with TypeScript, this may or may not be an option for you.

The most helpful way for us to get started was to extend our tsconfig.json file with this property:

// tsconfig.json excerpt:

{
  ...
  "compilerOptions": {
    ...
    "allowJs": true,
    ...
  }
  ...
}

This change lets our JS files that have JSDoc type hints get compiled. Also our IDEs (JetBrains IDEs and VS Code) can provide code-completion and Intellisense.

References:

edited Feb 11, 2021 at 19:32

answered Jul 5, 2019 at 20:59

PaulMest

15.3k10 gold badges57 silver badges54 bronze badges

2 Comments

Matheus Abreu Over a year ago

I've put inside compilerOptions ``` lang-js { "compilerOptions": { ..., "allowJs": true } ... } ```

Matthis Kohli Over a year ago

Same use case like me but imo makes the migration possible harder because you start taking all legacy code as dependency into typescript.

Ben Winding · Accepted Answer · 2021-01-21 13:46:35Z

19

2021 Solution

If you're still getting this error message:

TS7016: Could not find a declaration file for module './myjsfile'

Then you might need to add the following to tsconfig.json

{
  "compilerOptions": {
    ...
    "allowJs": true,
    "checkJs": false,
    ...
  }
}

This prevents typescript from trying to apply module types to the imported javascript.

answered Jan 21, 2021 at 13:46

Ben Winding

12k5 gold badges93 silver badges80 bronze badges

1 Comment

Lachlan McDonald Over a year ago

I found this solved my problem if using ts-jest, on a .ts file which imports a .js file which imports a .ts file. A totally unavoidable situation with a clean solution.

Community · Accepted Answer · 2017-05-23 12:26:19Z

In your second statement

import {FriendCard} from './../pages/FriendCard'

you are telling typescript to import the FriendCard class from the file './pages/FriendCard'

Your FriendCard file is exporting a variable and that variable is referencing the anonymous function.

You have two options here. If you want to do this in a typed way you can refactor your module to be typed (option 1) or you can import the anonymous function and add a d.ts file. See https://github.com/Microsoft/TypeScript/issues/3019 for more details. about why you need to add the file.

Option 1

Refactor the Friend card js file to be typed.

export class FriendCard {
webElement: any;
menuButton: any;
serialNumber: any;

constructor(card) {
    this.webElement = card;
    this.menuButton;
    this.serialNumber;
}



getAsWebElement = function () {
    return this.webElement;
};

clickMenuButton = function () {
    this.menuButton.click();
};

setSerialNumber = function (numberOfElements) {
    this.serialNumber = numberOfElements + 1;
    this.menuButton = element(by.xpath('.//*[@id=\'mCSB_2_container\']/li[' + serialNumber + ']/ng-include/div/div[2]/i'));
};

deleteFriend = function () {
    element(by.css('[ng-click="deleteFriend(person);"]')).click();
    element(by.css('[ng-click="confirm()"]')).click();
}
};

Option 2

You can import the anonymous function

 import * as FriendCard from module("./FriendCardJs");

There are a few options for a d.ts file definition. This answer seems to be the most complete: How do you produce a .d.ts "typings" definition file from an existing JavaScript library?

Sina Abedi · Accepted Answer · 2020-09-19 11:26:45Z

9

I tested 3 methods to do that...

Method1:

      const FriendCard:any = require('./../pages/FriendCard')

Method2:

      import * as FriendCard from './../pages/FriendCard';

Method3:

if you can find something like this in tsconfig.json:

      { "compilerOptions": { ..., "allowJs": true }

then you can write: import FriendCard from './../pages/FriendCard';

answered Sep 19, 2020 at 11:26

Sina Abedi

2,4211 gold badge27 silver badges29 bronze badges

1 Comment

Jay Over a year ago

thank you, method 1 solved my problem to import a js library

Leo · Accepted Answer · 2022-12-17 04:14:21Z

2

The answers about adding allowJs: true to your tsconfig.json worked for me, but I also had to make sure the includes: [] block within the tsconfig.json included Javascript files.

{
  "compilerOptions": {
      ...
      "include": ["src/**/*.js"]
      ...
  }
}

answered Dec 17, 2022 at 4:14

Leo

1874 silver badges15 bronze badges

Comments

erbelion · Accepted Answer · 2023-05-21 17:45:21Z

1

apart from adding allowJs and checkJs, like:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false
  }
}

make sure that strict option is not set to true.

answered May 21, 2023 at 17:45

erbelion

746 bronze badges

Comments

hunter2009 · Accepted Answer · 2024-03-13 14:36:24Z

1

If you want to view references to JS in a TS file, you need to set allowJs to true. If it doesn't work, you may also need to set maxNodeModuleJsDepth, for example, to 3.

answered Mar 13, 2024 at 14:36

hunter2009

1731 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to import js-modules into TypeScript file?

8 Answers 8

4 Comments

2 Comments

2021 Solution

1 Comment

Option 1

Option 2

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

2 Comments

2021 Solution

1 Comment

Option 1

Option 2

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related