选项1

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;

该文件的路径是

./页/ FriendCard.js

使用 require（）方法导入到另一个文件时我没有问题：

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

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

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

我正在使用WebStorm，因此它告诉我，（ TS2305 ）它没有导出成员'FriendCard'。

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

Answer 1

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

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

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

Answer 2

在你的第二个陈述中

title

您告诉打字稿从'./pages/FriendCard'文件导入FriendCard 类

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

这里有两种选择。如果要以键入方式执行此操作，可以重构要键入的模块（选项1），也可以导入匿名函数并添加d.ts文件。有关详细信息，请参阅https://github.com/Microsoft/TypeScript/issues/3019。关于你需要添加文件的原因。

选项1

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

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

选项2

您可以导入匿名函数

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

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

Answer 3

2021 年解决方案

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

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

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

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

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

Answer 4

我目前正在使用一些旧的代码库，并引入了对TypeScript的最小更改，以查看对我们的团队是否有帮助。根据您对TypeScript的严格要求，这可能是您的选择，也可能不是。

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

// tsconfig.json excerpt:

{
  ...

  "allowJs": true,

  ...
}

此更改使具有JSDoc类型提示的JS文件得以编译。另外，我们的IDE（JetBrains IDE和VS Code）也可以提供代码补全和Intellisense。

TypeScript Compiler Options

Answer 5

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

方法1：

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

方法2：

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

方法3：

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

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

然后您可以编写： import FriendCard from './../pages/FriendCard';

Answer 6

我已经面临这个问题很长时间了，但是这解决了我的问题。进入 tsconfig.json 并在 compilerOptions 下添加以下内容>

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

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

6 个答案:

选项1

选项2

2021 年解决方案