如何将 js-modules 导入 TypeScript 文件?

IT技术 javascript typescript protractor webstorm
2021-03-09 15:04:38

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

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 文件,但我仍然不知道它是如何工作的。你可以帮帮我吗?

6个回答

您可以按如下方式导入整个module:

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

有关更多详细信息,请参阅Typescript 官方文档module部分。

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

{
  "compilerOptions": {
    "allowJs": true
  }
}
这是最新的吗?我仍然遇到同样的错误...找不到module的声明文件...
2021-04-18 15:04:38
@nathan-h 您可能需要修改 tsconfig 文件...更多信息请访问:stackoverflow.com/a/56909179/872328
2021-04-18 15:04:38
感谢您在实际的相对路径前加上“./”。这使得编译时路径解析的所有差异。
2021-04-25 15:04:38

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

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

// tsconfig.json excerpt:

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

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

参考:

我已经把compilerOptions ``` lang-js { "compilerOptions": { ..., "allowJs": true } ... } ```
2021-05-03 15:04:38

在你的第二个陈述中

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

您告诉typescript从文件“./pages/FriendCard”中导入 FriendCard

您的 FriendCard 文件正在导出一个变量,而该变量正在引用匿名函数。

你在这里有两个选择。如果您想以类型化的方式执行此操作,您可以重构要键入的module(选项 1),或者您可以导入匿名函数并添加一个 d.ts 文件。有关更多详细信息,请参阅https://github.com/Microsoft/TypeScript/issues/3019关于为什么需要添加文件。

选项1

重构要输入的好友卡js文件。

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();
}
};

选项 2

您可以导入匿名函数

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

d.ts 文件定义有几个选项。这个答案似乎是最完整的:How do you generate a .d.ts "typings" definition file from an existing JavaScript library?

2021解决方案

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

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

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

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

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

救命稻草!(记得重启你的编辑器)
2021-04-22 15:04:38

我测试了 3 种方法来做到这一点......

方法一:

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

方法二:

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

方法三:

如果你能在 tsconfig.json 中找到这样的东西:

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

然后你可以写: import FriendCard from './../pages/FriendCard';