visual studio typescript"未捕获的ReferenceError:导出未定义在...."
use*_*136 5 html javascript import visual-studio typescript
我正在使用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).它仍然使用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模块格式.它工作(在开发人员控制台中没有看到任何错误).
首先是文件布局(来自blogpost).我所拥有的是一样的,除了我已经打电话给我的文件,index.html如default.htm让我想起了不好的OLE天.你可以require.js从http://requirejs.org/获得.并require.d.ts从https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/requirejs(保存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>
| 归档时间： |
|
| 查看次数： |
5993 次 |
| 最近记录： |