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

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

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');

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

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

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

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

Ответ 1

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

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

Для получения дополнительной информации см. Раздел модулей официальных документов Typcript.

Ответ 2

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

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

Вы говорите машинописи, чтобы импортировать класс FriendCard из файла. /pages/FriendCard

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

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

Опция 1

Рефакторинг файла JS карты друга для ввода.

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. Этот ответ представляется наиболее полным: как вы создаете файл определения "typings".d.ts из существующей библиотеки JavaScript?

Ответ 3

В настоящее время я использую несколько унаследованных кодовых баз и представляю минимальные изменения TypeScript, чтобы посмотреть, поможет ли это нашей команде. В зависимости от того, насколько строгим вы хотите быть с TypeScript, это может или не может быть вариант для вас.

Самый полезный способ начать работу - расширить файл tsconfig.json следующим свойством:

// tsconfig.json excerpt:

{
  ...

  "allowJs": true,

  ...
}

Это изменение позволяет скомпилировать наши JS файлы с подсказками типа JSDoc. Также наши IDE (JetBrains IDE и VS Code) могут обеспечить завершение кода и Intellisense.

Параметры компилятора TypeScript