Question

我正在学习TypeScript并希望使用导出/导入机制。我有3个.ts文件，代码如下：

1）MyClass.ts：

/// <reference path="../Scripts/jquery.d.ts" />
/// <reference path="../Scripts/dx.all.d.ts" />
/// <reference path="../Scripts/go.d.ts" />

export class MyClass {
    render(divId: string, text: string): void {
        ...
    }
    getData(): void {
        ...
    }
}

2）来电者：

import { MyClass } from './MyClass';

export class Caller {
    execute() {
        let myClass: MyClass = new MyClass();
        myClass.render("content", "Hello World");
        myClass.getData();
    }
}

3）Main.ts：

import { Caller } from './Caller';

window.onload = () => {
    let caller: Caller = new Caller();
    caller.execute();
};

4）HTML：

<script src="~/Scripts/MyClass.js"></script>
<script src="~/Scripts/Caller.js"></script>>
<script src="~/Scripts/Main.js"></script>

但是，没有显示任何内容。

有3个错误：

未捕获的SyntaxError：意外的令牌导出（对于MyClass.js）
未捕获的SyntaxError：意外的令牌导入（对于Caller.js）
未捕获的SyntaxError：意外的令牌导入（对于Main.js）

Answer 1

看到<script>，我猜它是在网络应用程序中。这些文件使用的是ES6模块语法。

目前，我认为只有Google Chrome支持本机ES6模块。没有其他浏览器支持任何类型的模块（ES6，CommonJS，AMD，SystemJs，UMD，...）。如果应用仅在Chrome中执行，则可以设置tsconfig选项module='ES6'。

否则，请使用：

TypeScript namespaces代替modules
- 建议用于小型项目和/或短生命周期
像SystemJs这样的模块加载器，用于加载主脚本及其依赖项
- 有点复杂
- 意味着有更多HTTP请求加载HTML页面
像WebPack这样的模块捆绑器或者Rollup中的新模块捆绑器，可以将ES6模块预先编译成任何浏览器都能理解的普通javascript文件
- 更复杂的解决方案
- 请参阅此tutorial获取帮助

TypeScript中的导出/导入问题

1 个答案: