参见英文答案 > 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。