如何将 js 模块导入 TypeScript 文件？

Question

我有一个包含这样一个文件的量角器项目：

 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;

该文件的路径是 ./pages/FriendCard.js 。

我使用 require() 将其导入另一个文件没有问题：

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

所以，我决定将这个文件导入到 TypeScript 文件中，就像这样：

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

我正在使用 WebStorm。它告诉我（ TS2305 ）它没有导出的成员“FriendCard”。

也许我必须以某种方式配置 tsconfig.json 文件，但我仍然不知道它是如何工作的。你可以帮帮我吗？

原文由 SanchelliosProg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以按如下方式导入整个模块：

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

有关详细信息，请参阅 Typescript 官方文档的 模块 部分。

最近更新的解决方案： 我们需要调整 tsconfig.json 以允许导入 JS 模块。归功于@paulmest、@ben-winding @crispen-gari 解决方案。

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

原文由 Ram Pasala 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2021解决方案

如果您仍然收到此错误消息：

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

然后您可能需要将以下内容添加到 tsconfig.json

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

这可以防止 typescript 尝试将模块类型应用于导入的 javascript。

原文由 Ben Winding 发布，翻译遵循 CC BY-SA 4.0 许可协议