Wie importiere ich js-Module in eine TypeScript-Datei?

78

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?

SanchelliosProg
quelle
1
"Ich verwende WebStorm, daher wird mir mitgeteilt, dass (TS2305) kein exportiertes Mitglied 'FriendCard' vorhanden ist." Nur eine kleine Anmerkung - TS2305bedeutet, dass die Warnung / der Fehler vom tatsächlichen TypeScript-Compiler / Sprachdienst und nicht vom tatsächlichen WebStorm erzeugt wird. IDE verwendet eine solche Nummerierung nicht für ihre eigenen Inspektionen / Parser.
LazyOne

Antworten:

75

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.

Ram Pasala
quelle
3
Vielen Dank, dass Sie "./" vor dem tatsächlichen relativen Pfad angegeben haben. Dies macht den Unterschied in der Pfadauflösung zum Zeitpunkt der Kompilierung aus.
Roman
41
Ist das aktuell? Ich erhalte immer noch den gleichen Fehler ... Konnte keine Deklarationsdatei für das Modul finden ...
Nathan H
45

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:

PaulMest
quelle
Ich habe compilerOptions `` `lang-js {" compilerOptions ": {...," allowJs ": true} ...}` `
Matheus Abreu
10

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?

Peter Grainger
quelle
1

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';

Sina
quelle
0

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
      ...
  }
}
Crispen Gari
quelle