我正在使用 visual studio 学习 typeScript，并尝试进行简单的类导出。我已经多次看到这个问题，但没有一个解决方案对我有帮助。我做错了什么？
- 我已经将模块系统从 CommonJs 更改为 system
- 我已经安装了 npm systemJs
- 尝试将“导入”写成“///...引用路径..../”
还是一样的错误“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>
我还有什么没做的？!？!
我刚刚解决了这个问题。或者更确切地说，我找到了一篇博客文章 https://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/ .为了遵循正确的 SO 指南，我将在此处复制它。
为什么出现“exports is undefined”是因为 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) 的一个实现。它仍然使用 exports但将其包装在 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 ) 并设置 module至 amd .我添加了一个 "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"]
}
删除了注释掉的行(带有默认值)。
启动服务器后，Visual Studio 将转译文件(使用 commonjs 模块格式)。要求我运行 tsc强制文件转译使用 amd模块格式。它起作用了(在开发者控制台中没有看到错误)。
首先是文件布局(来自博文)。我拥有的是相同的，只是我将我的文件称为 index.html作为default.htm让我想起过去糟糕的日子。你可以获得require.js来自 http://requirejs.org/ .和 require.d.ts来自 https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/requirejs (将 index.d.ts 保存为 require.d.ts )。
问候语.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'.
应用.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>