Jak zaimportować js-moduły do ​​pliku TypeScript?

Question

Mam projektu Kątomierz które zawierają taki plik:

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; 

Ścieżka do pliku jest

./pages/FriendCard.js

mam żadnych problemów to pokojowe import do innego pliku przy użyciu metody require() method:

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

Więc zdecydowałem się zaimportować ten plik do pliku wynikowego po prostu tak:

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

używam WebStorm, więc to mówi mi, że (TS2305) nie ma elementu eksportowanego "FriendCard".

Może muszę jakoś skonfigurować plik tsconfig.json, ale nadal nie wiem jak to działa. Czy mógłbyś mi pomóc?

Answer 1

Można importować cały moduł następująco:

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

Aby uzyskać więcej informacji należy zapoznać się z sekcją modules maszynopisu oficjalnych dokumentów.

Answer 2

W swoim drugim oświadczeniu

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

mówisz maszynopis zaimportować klasę FriendCard z pliku „./pages/FriendCard”

Plik FriendCard eksportuje zmiennej i tej zmiennej odwołuje się do anonimowej funkcji.

Masz dwie opcje tutaj. Jeśli chcesz to zrobić w typowy sposób, możesz poprawić moduł do wpisywania (opcja 1) lub możesz zaimportować anonimową funkcję i dodać plik dts. Aby uzyskać więcej informacji, patrz https://github.com/Microsoft/TypeScript/issues/3019. o tym, dlaczego musisz dodać plik.

Wariant 1

Refactor karcie znajomego js plik zostać wpisane.

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

Opcja 2

Można importować anonimową funkcję

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

Istnieje kilka opcji dla d.ts definicji zbioru. Ta odpowiedź wydaje się być najbardziej kompletne: How do you produce a .d.ts "typings" definition file from an existing JavaScript library?