javascript – visual studio typescript“未捕获的ReferenceError：导出未在…中定义”[复制]

参见英文答案 > Typescript ReferenceError: exports is not defined 10个
我正在使用visual studio学习typeScript并尝试进行简单的类导出.我已多次看到这个问题,但没有一个解决方案对我有帮助.我究竟做错了什么？

>我已将模块系统从CommonJs更改为system
>我已经安装了npm systemJs
>尝试而不是“导入”来写“/// …参考路径…. /”

仍然是相同的错误“未捕获的ReferenceError：导出未定义在……”

import { Address } from "./address";

class Customer {
  protected name: string = "";
  public addressObj: Address = new Address();
  private _CustomerName: string = "";
  public set CustomerName(value: string) {
    if (value.length == 0) {
      throw "Customer name is requaierd"
    }
    this._CustomerName = value;
  }
  public get CustomerName(): string {
    return this._CustomerName;
  }
}

export class Address {
        public street1: string = "";
    }

<!doctype html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
</head>

<body>
  <script src="address.js"></script>
  <script src="Customer.js"></script>
  <script>
    try {
      cust = new Customer();
      cust.CustomerName = "doron";
      cust.addressObj.street1 = "test"
    } catch (ex) {
      alert(ex);
    }
  </script>
</body>

</html>

还有什么我不做的？！？！

解决方法:

我刚刚解决了这个问题.或者更确切地说,我发现了一个https://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/的博客文章.为了遵循正确的SO指南,我将在这里重现它.

为什么“未定义导出”是由于Visual Studio转换为使用commonjs模块.我看了几天尝试不同的事情,并且消息似乎是commonjs是默认的并且应该“正常工作”(TM).但事实并非如此.我不知道缺少什么 – 也许VS需要一些包括.我无法解决问题.

使用commonjs的转换类将在.js文件的顶部和底部包含这样的行：

Object.defineProperty(exports, "__esModule", { value: true });
...
exports.SpeciesClass = SpeciesClass;

这是你的错误.

对我有用的解决方案是使用requirejs.它是AMD(http://requirejs.org/docs/whyamd.html)的一个实现.它仍然使用导出但将其包装在一个define中：

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    ...
    exports.SpeciesClass = SpeciesClass;

以下是博客文章https://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/的相关内容.对最新版本的Typescript进行了一些修改.不幸的是,在我工作的地方,我无法访问github(或类似的东西)所以我只能在这里粘贴我的文件.

我还必须允许Visual Studio的一些问题.我发现尽管配置了project.csproj的< TypescriptModuleKind>要成为AMD,它似乎总是默认为commonjs.所以我手动编写并希望找到一个解决方案来阻止VS默认.

我创建了一个tsconfig.json文件(tsc –init)并将模块设置为amd.我添加了一个“文件”：[“* .ts”].

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "amd",                     /* Specify module code generation: 'none', commonjs

    /* ... */

    /* Strict Type-Checking Options */
    "strict": true                            /* Enable all strict type-checking options. */
  },
  "Files" : ["*.ts"]
}

已删除注释掉的行(默认值).

启动服务器后,Visual Studio将传输文件(使用commonjs模块格式).要求我运行tsc强制文件转换为使用amd模块格式.它工作(在开发人员控制台中没有看到任何错误).

首先是文件布局(来自blogpost).我所拥有的是相同的,除了我将我的文件index.html称为default.htm让我想起了糟糕的日子.您可以从http://requirejs.org/获取require.js.并从https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/requirejs获取require.d.ts(将index.d.ts保存为require.d.ts).

Greeter.ts

export class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

AppConfig.ts

import { AppMain } from "./AppMain"

require(['AppMain'], 
    (main: any) => {
        var appMain = new AppMain();
        appMain.run();
    }
);

AppMain.ts

import { Greeter } from "./classes/Greeter"

export class AppMain {
    public run() {
        // code from window.onload
        var dummyEl: HTMLElement = document.createElement('span');
        var theEl: HTMLElement | null = document.getElementById('content');;
        var el: HTMLElement = theEl !== null ? theEl : dummyEl;
        var greeter: Greeter = new Greeter(el);
        greeter.start();
    }
};

或使用：

        var theEl: HTMLElement = document.getElementById('content');
        var greeter: Greeter = new Greeter(theEl);

并且只是意识到,当你转换时所谓的“错误”只是一个警告！：

app/AppMain.ts(7,13): error TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
    Type 'null' is not assignable to type 'HTMLElement'.

app.ts

不再使用了

的index.html

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <link rel="stylesheet" href="app.css" type="text/css" />
        <!--
            <script type="text/javascript" src="app/classes/Greeter.js"></script>
            <script src="app.js"></script>
        -->
        <script data-main="app/AppConfig" type="text/javascript" src="lib/require.js"></script>
    </head>
    <body>
        <h1>TypeScript HTML App</h1>

        <div id="content"></div>
    </body>
</html>

javascript – visual studio typescript“未捕获的ReferenceError：导出未在…中定义”[复制]

相关推荐