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

oyjwcjzk  于 2022-12-19  发布在  TypeScript
关注(0)|答案(7)|浏览(151)

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

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

brccelvz

brccelvz1#

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

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

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

最近更新的解决方案:我们需要调整tsconfig.json以允许JS模块将. credits导入到下面的@paulmest,@ben-winding @crispen-gari解决方案中。

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

ifsvaxew2#

我目前正在使用一些遗留的代码库,并引入最小的TypeScript更改,看看它是否对我们的团队有帮助。这可能是一个选择,也可能不是一个选择,这取决于您对TypeScript的要求有多严格。
最有帮助的入门方法是使用以下属性扩展tsconfig.json文件:

// tsconfig.json excerpt:

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

这一改变使我们的JS文件可以编译JSDoc类型提示。我们的IDE(JetBrains IDE和VS代码)也可以提供代码完成和智能感知。
参考文献:

  • TypeScript-编译器选项
  • TypeScript:TSConfig参考-编译器选项-allowJs
7rtdyuoh

7rtdyuoh3#

在你的第二次陈述中

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

您正在告诉typescript从文件."/pages/FriendCard“导入FriendCard
您的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?

ppcbkaq5

ppcbkaq54#

2021溶液

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

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

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

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

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

eoigrqb6

eoigrqb65#

我测试了三种方法...
方法一:

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

方法二:

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

方法三:
如果您可以在tsconfig.json中找到类似以下内容:

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

那么你可以写:第一个月

tzcvj98z

tzcvj98z6#

我一直面临这个问题很长一段时间,但这解决了我的问题进入tsconfig.json并在compilerOptions下添加以下内容

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

m1m5dgzv7#

关于将allowJs: true添加到tsconfig.json的答案对我很有效,但我还必须确保tsconfig.json中的includes: []块包含Javascript文件。

{
  "compilerOptions": {
      ...
      "include": ["src/**/*.js"]
      ...
  }
}

相关问题