javascript - 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?

Answer 1

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
  }
}