web-dev-qa-db-ja.com

Typescript es6 import module「ファイルはモジュールエラーではありません」

TypeScript 1.6をes6モジュールの構文で使っています。

私のファイルは次のとおりです。

test.ts：

module App {
  export class SomeClass {
    getName(): string {
      return 'name';
    }
  }
}

main.ts：

import App from './test';

var a = new App.SomeClass();

main.tsファイルをコンパイルしようとすると、このエラーが発生します。

エラーTS2306：ファイル 'test.ts'はモジュールではありません。

どうすればそれを達成できますか。

javascripttypescriptecmascript-6
83
Bazinga

Extended - いくつかのコメントに基づいて詳細を提供します

エラー

エラーTS2306：ファイル 'test.ts'はモジュールではありません。

ここに記載されている事実から来ている http://exploringjs.com/es6/ch_modules.html

17.モジュール

この章ではECMAScript 6における組み込みモジュールの動作について説明します。

17.1概要

ECMAScript 6では、モジュールはファイルに格納されています。ファイルごとに正確に1つのモジュールと、モジュールごとに1つのファイルがあります。モジュールからものをエクスポートするには2つの方法があります。これら2つの方法は混在させることができますが、通常は別々に使用することをお勧めします。

17.1.1複数の名前付きエクスポート

複数の名前付きエクスポートがあります。

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
...

17.1.2単一デフォルトエクスポート

単一のデフォルトエクスポートがある場合もあります。例えば、関数

//------ myFunc.js ------
export default function () { ··· } // no semicolon!

上記に基づいて、test.jsファイルの一部としてexportが必要です。このように内容を調整しましょう。

// test.js - exporting es6
export module App {
  export class SomeClass {
    getName(): string {
      return 'name';
    }
  }
  export class OtherClass {
    getName(): string {
      return 'name';
    }
  }
}

そして今、私たちはこれらの3つの方法でそれを輸入することができます：

import * as app1 from "./test";
import app2 = require("./test");
import {App} from "./test";

そして、私たちはこのような輸入品を消費することができます：

var a1: app1.App.SomeClass  = new app1.App.SomeClass();
var a2: app1.App.OtherClass = new app1.App.OtherClass();

var b1: app2.App.SomeClass  = new app2.App.SomeClass();
var b2: app2.App.OtherClass = new app2.App.OtherClass();

var c1: App.SomeClass  = new App.SomeClass();
var c2: App.OtherClass = new App.OtherClass();

そして、実際にそれを見るためにメソッドを呼び出します。

console.log(a1.getName())
console.log(a2.getName())
console.log(b1.getName())
console.log(b2.getName())
console.log(c1.getName())
console.log(c2.getName())

元の部分は名前空間の使用法の複雑さを軽減するのを手助けしようとしています

元の部分：

このQ&Aをチェックすることを強くお勧めします。

TypeScript外部モジュールで名前空間を使うにはどうすればいいですか？

最初の文を引用しましょう。

外部モジュールでは「名前空間」を使用しないでください。

しないでください。

真剣に。やめる。

...

この場合、moduletest.tsの内側には必要ありません。これは調整された内容かもしれませんtest.ts：

export class SomeClass
{
    getName(): string
    {
        return 'name';
    }
}

もっと読む

エクスポート=

前の例では、各バリデータを消費したときに、各モジュールは1つの値のみをエクスポートしました。このような場合、単一の識別子でも同じように機能する場合は、これらのシンボルを修飾名で処理するのは面倒です。

export =構文は、モジュールからエクスポートされる単一のオブジェクトを指定します。これは、クラス、インターフェース、モジュール、関数、または列挙型です。インポートされると、エクスポートされたシンボルは直接消費され、名前で修飾されません。

後でこれを使うことができます。

import App = require('./test');

var sc: App.SomeClass = new App.SomeClass();

sc.getName();

もっと読む

オプションのモジュールロードおよびその他の高度なロードシナリオ

場合によっては、状況によってはモジュールだけをロードしたいことがあります。 TypeScriptでは、型安全性を失うことなくモジュールローダーを直接呼び出すために、以下に示すパターンを使用して、このような高度なロードシナリオを実装できます。

コンパイラは、発行されたJavaScriptで各モジュールが使用されているかどうかを検出します。型システムの一部としてのみ使用されるモジュールの場合、require呼び出しは発行されません。未使用の参照をこのようにカリングすることはパフォーマンスの最適化に役立ち、またこれらのモジュールのオプションのロードも可能になります。

このパターンの中心的な考え方は、import id = require（ '...'）ステートメントによって、外部モジュールによって公開されている型にアクセスできるようになることです。以下のifブロックに示すように、モジュールローダーは（requireを通して）動的に呼び出されます。これは、参照カリングの最適化を利用するため、モジュールは必要なときにのみロードされます。このパターンが機能するには、importによって定義されたシンボルが型の位置でのみ使用されることが重要です（つまり、JavaScriptに出力される位置には絶対に使用しないでください）。

100
Radim Köhler

どうすればそれを達成できますか。

この例では、TypeScript <1.5内部モジュールを宣言しています。これは現在 名前空間と呼ばれています 古いmodule App {}構文は、namespace App {}と同等になりました。その結果、次のように動作します。

// test.ts
export namespace App {
    export class SomeClass {
        getName(): string {
            return 'name';
        }
    }
}

// main.ts
import { App } from './test';
var a = new App.SomeClass();

それは言われている...

名前空間のエクスポートを避けてください そして代わりにモジュール（以前は外部モジュールと呼ばれていました）をエクスポートしてください。必要であれば、 名前空間インポートパターン を使ってインポート時に名前空間を使うことができます。

// test.ts
export class SomeClass {
    getName(): string {
        return 'name';
    }
}

// main.ts
import * as App from './test'; // namespace import pattern
var a = new App.SomeClass();
8
Shaun Luttin

上記の答えは正しいです。しかし念のために…VS Codeで同じエラーが発生しました。エラーをスローしていたファイルを再保存/再コンパイルする必要がありました。

8
A. Tim

A。Timの答え に加えて、それでもうまくいかない場合があります。

  1. インテリセンスを使用してインポート文字列を書き換えます。時々これは問題を解決する
  2. VSコードを再起動
2
ZenVentzi