Typescript es6导入模块“文件不是模块错误”

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Typescript es6导入模块“文件不是模块错误”相关的知识,希望对你有一定的参考价值。

我正在使用带有es6模块语法的typescript 1.6。

我的文件是:

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'不是模块。

我怎么能做到这一点?

答案

扩展 - 根据一些评论提供更多详细信息

错误

错误TS2306:文件'test.ts'不是模块。

来自这里描述的事实http://exploringjs.com/es6/ch_modules.html

17.模块

本章介绍了内置模块在ECMAScript 6中的工作原理。

17.1 Overview

在ECMAScript 6中,模块存储在文件中。每个文件只有一个模块,每个模块只有一个文件。您有两种从模块导出内容的方法。这两种方式可以混合使用,但通常最好单独使用它们。

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!

基于以上所述,我们需要export作为test.js文件的一部分。让我们像这样调整它的内容:

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

现在我们可以用以下三种方式导入它:

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

原始部分试图帮助减少命名空间使用的复杂程度

Original part:

我强烈建议查看此问答:

How do I use namespaces with TypeScript external modules?

让我引用第一句话:

Do not use "namespaces" in external modules.

Don't do this.

Seriously. Stop.

...

在这种情况下,我们只需要在module内部使用test.ts。这可能是它调整的test.ts的内容:

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

在这里阅读更多

Export =

在前面的示例中,当我们使用每个验证器时,每个模块仅导出一个值。在这种情况下,当单个标识符同样如此时,通过它们的限定名称使用这些符号是很麻烦的。

export =语法指定从模块导出的单个对象。这可以是类,接口,模块,函数或枚举。导入时,导出的符号将直接使用,并且不受任何名称限定。

我们可以稍后使用它:

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

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

sc.getName();

在这里阅读更多:

Optional Module Loading and Other Advanced Loading Scenarios

在某些情况下,您可能只想在某些条件下加载模块。在TypeScript中,我们可以使用下面显示的模式来实现此模式和其他高级加载方案,以直接调用模块加载器而不会丢失类型安全性。

编译器检测是否在发出的javascript中使用了每个模块。对于仅用作类型系统一部分的模块,不会发出require调用。对未使用的引用进行剔除是一种很好的性能优化,并且还允许可选地加载这些模块。

模式的核心思想是import id = require('...')语句使我们能够访问外部模块公开的类型。模块加载器是动态调用的(通过require),如下面的if块所示。这利用了参考剔除优化,因此仅在需要时加载模块。要使此模式起作用,重要的是通过导入定义的符号仅用于类型位置(即从不在将被发送到JavaScript中的位置)。

另一答案

How can I accomplish that?

您的示例声明了一个TypeScript <1.5内部模块,现在称为namespace。旧的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();

That being said...

Try to avoid exporting namespaces而不是导出模块(以前称为外部模块)。如果需要,您可以使用namespace import pattern在导入时使用命名空间,如下所示:

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

// main.ts
import * as App from './test'; // namespace import pattern
var a = new App.SomeClass();
另一答案

以上答案是正确的。但以防万一...在VS Code中出现相同的错误。不得不重新保存/重新编译抛出错误的文件。

另一答案

除了A. Tim's answer之外,有时甚至不起作用,所以你需要:

  1. 使用intellisense重写导入字符串。有时这可以解决问题
  2. 重启VS代码

以上是关于Typescript es6导入模块“文件不是模块错误”的主要内容,如果未能解决你的问题,请参考以下文章

在 Typescript 编译期间在相对导入语句上附加 .js 扩展名(ES6 模块)

Typescript:esnext 编译器选项会破坏从外部库导入的 es6

Typescript和Node模块解析策略

TypeScript

如何将 ES6 导入与“请求”npm 模块一起使用

Jest Manual Mocks with React 和 Typescript:模拟 ES6 类依赖