Как импортировать js-модули в файл TypeScript?

Question

У меня есть транспортир проект, который содержит такой файл:

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; 

Путь к файлу

./pages/FriendCard.js

У меня нет никаких проблем ти это импорт в другой файл с использованием require() метод:

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

Итак, я решил импортировать этот файл в файл машинопись просто так:

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

Я использую WebStorm, поэтому он говорит мне, что (TS2305) это не имеет никакого экспортируемого элемента 'FriendCard.

Возможно, мне нужно как-то настроить файл tsconfig.json, но я до сих пор не знаю, как это работает. Не могли бы вы помочь мне?

Answer 1

Вы можете импортировать весь модуль следующим образом:

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

Для получения более подробной информации, пожалуйста, смотрите в разделе modules машинописного текста официальной документации.

Answer 2

В вашем втором заявлении

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

вы рассказываете машинописный импортировать FriendCard класс из файла «» ./pages/FriendCard

Ваш файл FriendCard экспортирует переменную и эту переменную ссылается на анонимную функцию.

У вас есть два варианта. Если вы хотите сделать это печатным способом, вы можете реорганизовать свой модуль для ввода (вариант 1), или вы можете импортировать анонимную функцию и добавить файл d.ts. См. https://github.com/Microsoft/TypeScript/issues/3019 для более подробной информации. о том, почему вам нужно добавить файл.

Вариант 1

Refactor Друг карты файл расслоение плотной наберется.

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

Вариант 2

Вы можете импортировать анонимную функцию

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

Есть несколько вариантов для d.ts определения файла. Ответ на этот вопрос, как представляется, наиболее полным: How do you produce a .d.ts "typings" definition file from an existing JavaScript library?