如何将 js-module 导入到 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():

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

因此，我决定像这样将这个文件导入到 TypeScript 文件:

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

我正在使用 WebStorm。它告诉我(TS2305)它没有导出的会员“ FriendCard”。

也许我不得不设置 tsconfig.json 文件，但我仍然不知道它是如何工作的。你能帮助我吗？

255108 次浏览
小开

在你的第二份声明中

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

你告诉打字机从文件“ ./pages/FriendCard”导入 FriendCard 同学们

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

你有两个选择。如果您希望以类型化的方式完成此操作，可以将模块重构为类型化(选项1) ，或者可以导入匿名函数并添加 d.ts 文件。有关详细信息，请参阅 https://github.com/Microsoft/TypeScript/issues/3019。为什么需要添加文件。

选择一

重构要键入的 Friend 卡 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();
}
};

选择二

可以导入匿名函数

 import * as FriendCard from module("./FriendCardJs");

有几个 d.ts 文件定义的选项，这个答案似乎是最完整的: 如何从现有的 JavaScript 库生成.d.ts“类型”定义文件？

小开
最佳答案

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

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

更多细节请参考 模组版本的正式文档。

最近更新的解决方案: 我们需要调整 Tsconfig.json以允许 JS 模块导入。 下面是“ paulmest，Ben-wind，Crispen-gari Solutions”的信用记录。

{
"compilerOptions": {
"allowJs": true
}
}
小开

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

对于我们来说，最有用的入门方法是使用以下属性扩展 tsconfig.json文件:

// tsconfig.json excerpt:


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

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

参考文献:

小开

我测试了三种方法。

方法一:

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

方法二:

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

方法三:

如果您能在 tsconfig.json 中找到类似的内容:

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

然后你可以写: import FriendCard from './../pages/FriendCard';

小开

我已经面对这个问题很长时间了，但是这个问题解决了我的问题 进入 Tsconfig.json，并在 < strong > comperOptions 下添加以下内容

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

2021解决方案

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

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

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

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

这可以防止类型脚本试图将模块类型应用到导入的 javascript。


提交答案