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

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

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（）

将其导入到另一个文件时没有问题：

因此，我决定将此文件导入TypeScript文件，如下所示：

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

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

---

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

在你的第二次发言中

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

您正在告诉typescript从文件“/pages/FriendCard”导入FriendCard类

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

你有两个选择。如果您希望以类型化的方式执行此操作，您可以将模块重构为类型化（选项1），或者可以导入匿名函数并添加一个d.ts文件。有关更多详细信息，请参阅。关于为什么需要添加文件

选择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文件定义有几个选项。这个答案似乎是最完整的：

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

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

有关更多详细信息，请参阅Typescript官方文件的章节

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

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

---

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

对于我们来说，最有用的入门方法是使用以下属性扩展我们的

tsconfig.json

文件：

// tsconfig.json excerpt:

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

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

参考资料：

---

我测试了3种方法

方法1：

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

方法2：

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

方法3：

如果您可以在tsconfig.json中找到类似的内容：

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

然后你可以写：

---

从“/../pages/FriendCard”导入友谊卡
我长期以来一直面临这个问题，但这解决了我的问题进入tsconfig.json中，并在编译器选项下添加以下内容

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

2021解决方案
如果您仍然收到此错误消息：

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

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

{
“编译器选项”：{
...
“allowJs”：正确，
“checkJs”：false，
...
}
}

这将阻止typescript尝试将模块类型应用于导入的javascript。
“我使用的是WebStorm，所以它告诉我，（TS2305）它没有导出的成员“FriendCard”。“只是一个小提示--
TS2305
意味着警告/错误是由实际的typescript编译器/语言服务产生的，而不是实际的WebStorm。”。。由于IDE在其自己的检查/解析器中不使用这种编号。感谢您在实际相对路径前面明确指出“/”。这使得编译时的路径分辨率大不相同。这是最新的吗？我仍然得到同样的错误。。。找不到模块的声明文件…@nathan-h您可能需要修改tsconfig文件。。。这里的更多信息：我在编译器选项中加入了``lang js{“compilerOptions”：{…，“allowJs”：true}…}```这是正确的答案，不幸的是，它不能工作！（请记住重新启动编辑器）
TS7016: Could not find a declaration file for module './myjsfile'