如何將 js 模塊導入 TypeScript 文件？

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;

該文件的路徑是./pages/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 官方文檔的模塊部分。

最近更新的解決方案：我們需要調整tsconfig.json以允許 JS 模塊導入。 歸功於@paulmest、@ben-winding @crispen-gari 解決方案。

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

Answer 2

我目前正在使用一些遺留代碼庫並引入最少的 TypeScript 更改，以查看它是否對我們的團隊有所幫助。 根據您希望使用 TypeScript 的嚴格程度，這可能是也可能不是您的選擇。

對我們來說最有用的入門方法是使用以下屬性擴展我們的tsconfig.json文件：

// tsconfig.json excerpt:

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

此更改允許編譯具有 JSDoc 類型提示的 JS 文件。 此外，我們的 IDE（JetBrains IDE 和 VS Code）可以提供代碼完成和智能感知。

參考：

• TypeScript - 編譯器選項
• TypeScript：TSConfig 參考 - 編譯器選項 - allowJs

Answer 3

在你的第二個陳述中

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

您告訴打字稿從文件“./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 generate a .d.ts "typings" definition file from an existing JavaScript library？

Answer 4

2021 解決方案

如果您仍然收到此錯誤消息：

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

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

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

這可以防止 typescript 嘗試將模塊類型應用於導入的 javascript。

Answer 5

我測試了 3 種方法來做到這一點......

方法一：

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

方法二：

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

方法三：

如果你能在 tsconfig.json 中找到這樣的東西：

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

然后你可以寫： import FriendCard from './../pages/FriendCard';

Answer 6

我一直面臨這個問題，但這解決了我的問題進入tsconfig.json並在compilerOptions下添加以下內容

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

Answer 7

關於添加allowJs: true到你的tsconfig.json的答案對我有用，但我還必須確保includes: []塊在tsconfig.json包含 Javascript 文件。

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