Cómo importar js-modules en un archivo TypeScript?

Tengo un proyecto de Transportador que contiene dicho archivo: 

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 la importación a otro archivo usando el método require () : 

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

Por lo tanto, he decidido importar este archivo al archivo TypeScript así: 

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

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

Tal vez tenga que configure tsconfig.archivo json de alguna manera, pero todavía no sé cómo funciona. ¿Podrías ayudarme?

Author: SanchelliosProg, 2016-12-19
Source

2 answers

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

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

Para más detalles, consulte la sección modules de Typescript official docs.

 29
Author: Ram Pasala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-19 10:36:14

En su segunda declaración

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

Le estás diciendo a typescript que importe la clase 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 una manera escrita, puede refactorizar su módulo a escribir (opción 1) o puede importar la función anónima y agregar un archivo d.ts. Ver https://github.com/Microsoft/TypeScript/issues/3019 para más detalles. acerca de por qué necesita agregar el archivo.

Opción 1

Refactoriza el archivo js de la tarjeta de amigo a 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();
}
};

Opción 2

Puede 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 .d. ts "typings" definition file from an existing JavaScript library?

 3
Author: Peter Grainger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:19