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

Question

我有一个 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) 它没有导出成员 'FriendCard'.

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

Answer 1

在你的第二个陈述中

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

你告诉 typescript 从文件 './pages/FriendCard'

中导入 FriendCard class

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

这里有两种选择。如果你想以类型化的方式执行此操作，你可以重构你的模块以进行类型化（选项 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 produce a .d.ts "typings" definition file from an existing JavaScript library?

Answer 2

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

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

更多细节请参考Typescript官方文档的modules部分。

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

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

Answer 3

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

对我们最有帮助的开始方式是使用属性:

扩展我们的 tsconfig.json 文件

// tsconfig.json excerpt:

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

此更改允许我们编译具有 JSDoc 类型提示的 JS 文件。我们的 IDE（JetBrains IDE 和 VS Code）也可以提供 code-completion 和 Intellisense。

参考文献：

Answer 4

我测试了 3 种方法...

方法一：

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

方法二：

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

方法三：

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

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

然后你可以这样写： import FriendCard from './../pages/FriendCard';

Answer 5

我长期以来一直面临这个问题，但这解决了我的问题 进入 tsconfig.json 并添加compilerOptions

下的以下内容

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

Answer 6

2021 年解决方案

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

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

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

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

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

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

How to import js-modules into TypeScript file?

javascript

webstorm

typescript

protractor

选项 1

选项 2

2021 年解决方案