Visual Studio 打字稿“Uncaught ReferenceError:exports is not defined at...." [英] visual studio typescript "Uncaught ReferenceError: exports is not defined at...."

查看：38
本文介绍了Visual Studio 打字稿“Uncaught ReferenceError:exports is not defined at...."的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Visual Studio 学习 typeScript 并尝试进行简单的类导出.我已经多次看到这个问题，但没有一个解决方案对我有帮助.我做错了什么?

  • 我已将模块系统从 CommonJs 更改为系统
  • 我已经安装了 npm systemJs
  • 尝试代替import"写///...引用路径..../"

仍然是同样的错误Uncaught ReferenceError:exports is not defined at..."

import { Address } from "./address";类客户{受保护的名称:字符串 = "";公共地址对象:地址 = 新地址()；私人 _CustomerName: 字符串 = "";公共集客户名称(值:字符串){如果(值.长度== 0){抛出客户名称需要"}this._CustomerName = 值；}公共获取客户名称():字符串{返回 this._CustomerName;}}

导出类地址{公共街道1:字符串="；}

<头><title></title><meta charset="utf-8"/><身体><script src="address.js"></script><script src="Customer.js"></script><脚本>尝试 {cust = 新客户()；cust.CustomerName = "doron";cust.addressObj.street1 = "测试"}赶上(前){警报(例如)；}</html>

我还没有做什么?！?！

解决方案

我刚刚解决了这个问题.或者更确切地说，我发现了一篇博客文章

Greeter.ts

export class Greeter {元素:HTMLElement；跨度:HTMLElement；timerToken:数字；构造函数(元素:HTMLElement){this.element = 元素;this.element.innerText += "时间是:";this.span = document.createElement('span');this.element.appendChild(this.span);this.span.innerText = new Date().toUTCString();}开始() {this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);}停止() {clearTimeout(this.timerToken);}}

AppConfig.ts

import { AppMain } from "./AppMain"要求(['AppMain']，(主要:任何)=>{var appMain = new AppMain();appMain.run();});

AppMain.ts

import { Greeter } from "./classes/Greeter"导出类 AppMain {公共运行(){//来自 window.onload 的代码var dummyEl: HTMLElement = document.createElement('span');var theEl: HTMLElement |null = document.getElementById('content');;var el: HTMLElement = theEl !== null ?theEl : dummyEl;var 迎宾员:迎宾员 = 新迎宾员(el)；欢迎语.start();}};

或者使用:

 var theEl: HTMLElement = document.getElementById('content');var 迎宾员:迎宾员 = 新迎宾员(theEl)；

并且要意识到，在您转译时所谓的错误"只是一个警告！:

app/AppMain.ts(7,13): 错误 TS2322: Type 'HTMLElement |null' 不可分配给类型 'HTMLElement'.类型 'null' 不能分配给类型 'HTMLElement'.

app.ts

不再使用

index.html

<头><meta charset="utf-8"/><title>TypeScript HTML 应用</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><身体><h1>TypeScript HTML 应用程序</h1><div id="内容"></div>

I am learning typeScript with visual studio and trying to do a simple class export. I have seen this problem many times, but none of the solutions helped me. what am I doing wrong ?

  • I have changed module system from CommonJs to system
  • I have installed npm systemJs
  • tried instead of "import" to write "/// ...reference path.... / "

still the same error "Uncaught ReferenceError: exports is not defined at..."

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>

what else am I not doing ?!?!

解决方案

I've just solved this. Or rather I found a blog post that does https://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/. To follow the proper SO guidelines I will reproduce it here.

Why you get 'exports is undefined' is due to Visual Studio transpiling to use commonjs modules. I looked at this for days trying different things and the message seemed to be that commonjs is the default and should "just work" (TM). But doesn't. I don't know what is missing - perhaps VS needs some include. I couldn't work out what.

The transpiled class using commonjs will include lines like this at the top and bottom of the .js file:

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

This is your error.

The solution that worked for me was to use requirejs. It is an implementation of AMD (http://requirejs.org/docs/whyamd.html). It still uses exports but wraps it in a define:

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

What follows is pretty-much the blog post https://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/. With some modifications for the most recent version of Typescript. Unfortunately where I'm working I don't have access to github (or anything like that) so I can only paste my files in here.

I also had to allow for some issues with Visual Studio. I found that despite configuring the project.csproj's <TypescriptModuleKind> to be AMD, it seemed to always default to commonjs. So I transpile manually and hope to find a solution to stop VS defaulting.

I created a tsconfig.json file (tsc --init) and set the module to amd. I added a "Files": ["*.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"]
}

Commented out lines (with defaults) removed.

After starting the server, Visual Studio would transpile the files (using commonjs module format). Requiring me to run tsc to force the files to transpile to use the amd module format. And it worked (no errors seen in the developer console).

First the files layout (from blogpost). What I have is the same except i've called my file index.html as default.htm reminds me of the bad ole days. You can get require.js from http://requirejs.org/. And require.d.ts from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/requirejs (save the index.d.ts as 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();
    }
};

Or use:

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

And just realise that what is called an 'error' when you transpile is just a warning!:

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

No longer used

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>

这篇关于Visual Studio 打字稿“Uncaught ReferenceError:exports is not defined at...."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆