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

javascript typescript webstorm protractor

2022-08-30 04:31:56

我有一个Protractor项目，其中包含这样一个文件：

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）它没有导出的成员“朋友卡”。

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

答案 1

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

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

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

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

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

答案 2

我目前正在采用一些遗留的代码库，并引入最小的TypeScript更改，看看它是否有助于我们的团队。根据您希望对TypeScript的严格程度，这可能是也可能不是您的选择。

对我们来说，最有用的方法是使用以下属性扩展我们的文件：tsconfig.json

// tsconfig.json excerpt:

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

此更改允许编译具有 JSDoc 类型提示的 JS 文件。此外，我们的IDE（JetBrains IDE和VS Code）可以提供代码完成和智能感知。

引用：