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


78

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

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


1
“我正在使用WebStorm,所以它告诉我,(TS2305)它没有导出的成员'FriendCard'。” 只需注意一下-TS2305警告/错误是由实际的TypeScript编译器/语言服务而不是实际的WebStorm ..产生的,因为IDE在其自己的检查/解析器中未使用此类编号。
LazyOne

Answers:


75

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

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

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


3
感谢您在实际相对路径前面清楚地表达“ ./”。这使编译时的路径分辨率有所不同。
罗马

41
这是最新的吗?我仍然遇到相同的错误...无法找到模块的声明文件...
Nathan H

45

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

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

// tsconfig.json excerpt:

{
  ...

  "allowJs": true,

  ...
}

此更改使具有JSDoc类型提示的JS文件得以编译。同样,我们的IDE(JetBrains IDE和VS Code)也可以提供代码完成和Intellisense。

参考文献:


我已经把里面compilerOptions ```郎JS { “compilerOptions”:{..., “allowJs”:真正} ...}```
马修斯阿布雷乌

10

在你的第二个陈述中

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

您正在告诉打字稿从文件“ ./pages/FriendCard”导入FriendCard

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

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

选项1

重构要输入的Friend card 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文件定义有几个选项。这个答案似乎是最完整的:如何从现有的JavaScript库中生成.d.ts“类型”定义文件?


1

我测试了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';


0

我已经面对这个问题很长时间了,但是这解决了我的问题什么呢?进入tsconfig.json并在以下编译器选项下添加以下内容

{
  "compilerOptions": {
      ...
      "allowJs": true
      ...
  }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.