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.