web-dev-qa-db-ja.com

js-modulesをTypeScriptファイルにインポートする方法は？

このようなファイルを含む分度器プロジェクトがあります：

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ファイルを何らかの方法で構成する必要があるかもしれませんが、それがどのように機能するのかまだわかりません。私たちを手伝ってくれますか？

javascripttypescriptprotractorwebstorm
44
SanchelliosProg

次のようにモジュール全体をインポートできます。

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

詳細については、TypeScript公式ドキュメントの modules セクションを参照してください。

48
Ram Pasala

2番目のステートメント

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

typeScriptにFriendCardclassをファイル './pages/FriendCard'からインポートするように指示しています

FriendCardファイルは変数をエクスポートしており、その変数は匿名関数を参照しています。

ここには2つのオプションがあります。型指定された方法でこれを行う場合は、モジュールを型指定されるようにリファクタリングするか（オプション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ファイル定義にはいくつかのオプションがあります。この答えは最も完全なようです： 既存のJavaScriptライブラリから.d.ts "typings"定義ファイルをどのように作成しますか？

7
Peter Grainger

現在、いくつかのレガシーコードベースを使用し、最小限のTypeScriptの変更を導入して、チームに役立つかどうかを確認しています。 TypeScriptをどの程度厳しくしたいかによって、これが選択肢になる場合とない場合があります。

始めるための最も便利な方法は、次のプロパティを使用してtsconfig.jsonファイルを拡張することです。

// tsconfig.json excerpt:

{
  ...

  "allowJs": true,

  ...
}

この変更により、JSDocタイプヒントを持つJSファイルがコンパイルされます。また、IDE（JetBrains IDEおよびVS Code）は、コード補完とIntellisenseを提供できます。

TypeScriptコンパイラオプション

5
PaulMest