web-dev-qa-db-fra.com

Comment importer des js-modules dans un fichier TypeScript?

J'ai un projet de rapporteur qui contient un tel fichier:

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;

Le chemin vers le fichier est

./pages/FriendCard.js

Je n'ai aucun problème avec son importation dans un autre fichier en utilisant la méthode require ():

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

J'ai donc décidé d'importer ce fichier dans le fichier TypeScript juste comme ça:

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

J'utilise WebStorm, donc il me dit que (TS2305) il n'a pas de membre exporté, "FriendCard".

Peut-être que je dois configurer le fichier tsconfig.json d'une manière ou d'une autre, mais je ne sais toujours pas comment cela fonctionne. Pourriez-vous m'aider?

javascripttypescriptprotractorwebstorm
44
SanchelliosProg

Vous pouvez importer le module entier comme suit:

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

Pour plus de détails, reportez-vous à la section modules de la documentation officielle TypeScript.

48
Ram Pasala

Dans votre deuxième déclaration

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

vous dites à TypeScript d'importer la classe FriendCard à partir du fichier './pages/FriendCard'

Votre fichier FriendCard exporte une variable et cette variable fait référence à la fonction anonyme.

Vous avez deux options ici. Si vous voulez le faire de manière typée, vous pouvez refactoriser votre module (option 1) ou importer la fonction anonyme et ajouter un fichier d.ts. Voir https://github.com/Microsoft/TypeScript/issues/3019 pour plus de détails. pourquoi vous devez ajouter le fichier.

Option 1

Refactoriser le fichier js de la carte ami à saisir.

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

Vous pouvez importer la fonction anonyme

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

Il existe quelques options pour une définition de fichier d.ts. Cette réponse semble être la plus complète: Comment créez-vous un fichier de définition "typings" .d.ts à partir d'une bibliothèque JavaScript existante?

7
Peter Grainger

Je suis en train de prendre quelques bases de code héritées et d'introduire des modifications minimes de TypeScript pour voir si cela aide notre équipe. Selon le degré de rigueur que vous souhaitez appliquer à TypeScript, cela peut être une option pour vous.

Le moyen le plus utile pour nous de commencer était d’étendre notre fichier tsconfig.json avec cette propriété:

// tsconfig.json excerpt:

{
  ...

  "allowJs": true,

  ...
}

Cette modification permet à nos fichiers JS contenant des indications de type JSDoc d’être compilés. De plus, nos IDE (IDE JetBrains et VS Code) peuvent fournir une complétion de code et Intellisense.

Options du compilateur TypeScript

5
PaulMest