Ich habe ein Winkelmesser-Projekt, das eine solche Datei enthält:

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;

Pfad zur Datei ist ./pages/FriendCard.js.

Ich habe keine Probleme mit dem Import in eine andere Datei mit require():

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

Also habe ich beschlossen, diese Datei einfach so in die TypeScript-Datei zu importieren:

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

Ich benutze WebStorm. Es sagt mir, dass ( TS2305 ) es kein exportiertes Mitglied 'FriendCard' hat.

Vielleicht muss ich die Datei tsconfig.json irgendwie konfigurieren, aber ich weiß immer noch nicht, wie es funktioniert. Kannst du mir helfen?

Sie können das gesamte Modul wie folgt importieren:

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

Für weitere Informationen lesen Sie bitte den Modulen Abschnitt Typoskript offizieller Dokumentation.

Ich nehme derzeit einige ältere Codebasen und führe minimale TypeScript-Änderungen ein, um zu sehen, ob dies unserem Team hilft. Je nachdem, wie streng Sie mit TypeScript sein möchten, ist dies möglicherweise eine Option für Sie.

Der hilfreichste Einstieg war, unsere tsconfig.jsonDatei mit dieser Eigenschaft zu erweitern:

// tsconfig.json excerpt:

{
  ...

  "allowJs": true,

  ...
}

Mit dieser Änderung können unsere JS-Dateien mit Hinweisen zum Typ JSDoc kompiliert werden. Auch unsere IDEs (JetBrains IDEs und VS Code) können Code-Vervollständigung und Intellisense bereitstellen.

Verweise:

• TypeScript - Compiler-Optionen
• TypeScript: TSConfig-Referenz - Compiler-Optionen - allowJs

In deiner zweiten Aussage

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

Sie weisen Typoskript an, die FriendCard- Klasse aus der Datei './pages/FriendCard' zu importieren.

Ihre FriendCard-Datei exportiert eine Variable und diese Variable verweist auf die anonyme Funktion.

Sie haben hier zwei Möglichkeiten. Wenn Sie dies auf typisierte Weise tun möchten, können Sie Ihr zu tippendes Modul umgestalten (Option 1) oder die anonyme Funktion importieren und eine d.ts-Datei hinzufügen. Weitere Informationen finden Sie unter https://github.com/Microsoft/TypeScript/issues/3019 . darüber, warum Sie die Datei hinzufügen müssen.

Option 1

Refaktorieren Sie die zu tippende js-Datei der Freundeskarte.

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

Option 2

Sie können die anonyme Funktion importieren

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

Es gibt einige Optionen für eine d.ts-Dateidefinition. Diese Antwort scheint die vollständigste zu sein: Wie erstellen Sie eine .d.ts-Definitionsdatei "typings" aus einer vorhandenen JavaScript-Bibliothek?

Ich habe 3 Methoden getestet, um das zu tun ...

Methode 1:

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

Methode 2:

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

Methode 3:

Wenn Sie so etwas in tsconfig.json finden können:

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

dann kannst du schreiben: import FriendCard from './../pages/FriendCard';

Ich bin schon lange mit diesem Problem konfrontiert, aber was dies mein Problem löst Gehen Sie in die Datei tsconfig.json und fügen Sie unter compilerOptions Folgendes hinzu

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