Extended -根据一些注释提供更多细节

错误

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

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

17. 模块

本章解释 ECMAScript 6中的内置模块是如何工作的。

17.1概览

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

最初的部分试图帮助降低名称空间使用的复杂性

原创部分:

我真的强烈建议检查下面的问答:

如何对 TypeScript 外部模块使用名称空间？

让我引用第一句话:

不要在外部模块中使用“名称空间”。

别这样。

说真的，别说了。

...

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

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

你可在此浏览更多资料

出口 =

在前面的示例中，当我们使用每个验证器时，每个模块只导出一个值。在这种情况下，如果只使用一个标识符，那么通过限定名来处理这些符号就很麻烦了。

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

我们以后可以这样消费:

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


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


sc.getName();

点击这里阅读更多:

可选模块加载和其他高级加载方案

在某些情况下，您可能只希望在某些条件下加载模块。在 TypeScript 中，我们可以使用下面所示的模式来实现这个以及其他高级加载场景，从而直接调用模块加载器，而不会失去类型安全性。

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

该模式的核心思想是 import id = demand (’...’)语句使我们能够访问外部模块公开的类型。模块加载器是动态调用的(通过请求) ，如下面的 if 块所示。这利用了引用剔除优化，因此只有在需要时才加载模块。为了使这个模式工作，重要的是通过导入定义的符号只用于类型位置(也就是说，从来不用于将发送到 JavaScript 中的位置)。

我怎么才能做到呢？

您的示例声明了一个 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();

以上答案是正确的，但以防万一..。 在 VS 代码中出现了同样的错误。必须重新保存/重新编译抛出错误的文件。

除了 蒂姆的回答之外，有时候甚至连它也不起作用，所以你需要:

1. 使用智能感知重写导入字符串
2. 重新启动 VS 代码

除了 Tim 的回答之外，这个问题还发生在我将一个文件分解为他们自己的文件时。

由于某种原因，VSCode 缩进了我的[ class ]代码的某些部分，从而导致了这个问题。一开始很难注意到这一点，但是当我意识到代码是缩进的时候，我格式化了代码，问题就消失了。

例如，在粘贴过程中，Class 定义第一行之后的所有内容都是自动缩进的。

export class MyClass extends Something<string> {
public blah: string = null;


constructor() { ... }
}

该文件需要从核心添加 Component，因此将以下导入添加到顶部

从“@棱/芯”导入{组件} ;

我有这个问题，我忘了出口类。

以防万一，我有这些文件

//server.ts


class Server{
...
}


exports.Server = Server

//app.ts


import {Server} from './server.ts'

这实际上产生了一个错误，但我把 server.ts改为

//server.ts


export class Server{
...
}

成功了

注意: 我正在使用这个配置

 "target": "esnext",
"module": "commonjs",

对于 vue 组件中的导入 js，我遇到了同样的问题(“ File is not a module error”)

import handleClientLoad from "../../../public/js/calendar.js"

我这样做，并解决它

// @ts-ignore
import handleClientLoad from "../../../public/js/calendar.js"

我在一个没有导出的模块中遇到了同样的问题。我只是用来治副作用的。这里是 关于导入副作用模块，TypeScript 文档是怎么说的:

虽然不推荐使用这种方法，但是有些模块设置了一些可供其他模块使用的全局状态。这些模块可能没有任何导出，或者消费者对它们的任何导出都不感兴趣。要导入这些模块，请使用:

import "./my-module.js";

在这种情况下，您可以通过简单地导出一个空对象来修复“ File is not a module”错误:

// side-effects stuff


export default {};