javascript - online - typescript import js

¿Cómo importar js-modules en el archivo TypeScript?

Question

Tengo un proyecto de Protractor que contiene un archivo de este tipo:

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;

La ruta al archivo es

./pages/FriendCard.js

No tengo problemas con su importación a otro archivo utilizando el método require () :

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

Entonces, he decidido importar este archivo al archivo de TypeScript así:

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

Estoy usando WebStorm, por lo que me dice que ( TS2305 ) no tiene ningún miembro exportado ''FriendCard''.

Tal vez tenga que configurar el archivo tsconfig.json de alguna manera, pero todavía no sé cómo funciona. ¿Usted me podría ayudar?

Answer 1

En tu segunda declaración

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

le está diciendo a mecanografia que importe la clase de FriendCard desde el archivo ''./pages/FriendCard''

Su archivo FriendCard está exportando una variable y esa variable hace referencia a la función anónima.

Tienes dos opciones aquí. Si desea hacer esto de forma escrita, puede refactorizar el módulo que va a escribir (opción 1) o puede importar la función anónima y agregar un archivo d.ts. Consulte https://github.com/Microsoft/TypeScript/issues/3019 para obtener más detalles. acerca de por qué necesita agregar el archivo.

Opción 1

Refactorice el archivo js de la tarjeta del amigo que se escribirá.

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

opcion 2

Puedes importar la función anónima

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

Hay algunas opciones para una definición de archivo d.ts. Esta respuesta parece ser la más completa: ¿Cómo se produce un archivo de definición de "typings" .d.ts desde una biblioteca de JavaScript existente?

Answer 2

Puede importar todo el módulo de la siguiente manera:

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

Para más detalles, consulte la sección de modules de los documentos oficiales de Typescript.