typescript 打字稿：如何导入类（“未捕获的引用错误”）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31160722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typescript: How to import classes ("Uncaught ReferenceError")
提问by Moritz G?ckel
Im new at Typescript. I like the idea, that the compiler will point errors most out, because he really gets the code. Now I have made an test-project, no compiler errors, but an exception on runtime:
我是 Typescript 的新手。我喜欢这个想法，编译器会最指出错误，因为他真的得到了代码。现在我做了一个测试项目，没有编译器错误，但运行时出现异常：
Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7
未捕获的 ReferenceError：船未定义（匿名函数）@ Main.ts:7
Obviously the imports do not work. But why? I tried with amd and with commonjs and got the same error.
显然，进口不起作用。但为什么？我尝试使用 amd 和 commonjs 并得到相同的错误。
Here the code:
这里的代码：
index.html
索引.html
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Test</title>
<script data-main="main" type="text/javascript" src="require.js"></script>
</head>
<body>
<span id="output"></span>
</body>
</html>
Main.ts
主文件
///<reference path='Vehicle.ts'/>
///<reference path='Car.ts'/>
///<reference path='Boat.ts'/>
var outputElement = document.getElementById('output');
var vehicleOne: Vehicle.Vehicle = new Boat.Boat("One");
var car: Car.Car = new Car.Car("Two");
var vehicleTwo: Vehicle.Vehicle = car;
outputElement.innerHTML = vehicleOne.do() + " " + vehicleOne.getName() + "<br />"
+ vehicleTwo.do() + " " + vehicleTwo.getName() + "<br />"
+ car.do() + " " + car.getName() + " " + car.doCar() + "<br />";
Vehicle.ts
车辆.ts
module Vehicle{
export class Vehicle
{
private name: string;
constructor (name: string)
{
this.name = name;
}
do() : string
{
return "Im a vehicle";
}
getName() : string
{
return this.name;
}
}
}
Car.ts
Car.ts
///<reference path='Vehicle.ts'/>
module Car {
export class Car extends Vehicle.Vehicle {
constructor(name:string) {
super("CAR: " + name);
}
do():string {
return "Im a car";
}
doCar():string {
return "Only cars can do this :)";
}
}
}
Boat.ts
船.ts
///<reference path='Vehicle.ts'/>
module Boat {
export class Boat extends Vehicle.Vehicle {
constructor(name:string) {
super("BOAT " + name);
}
do():string {
return "Im a boat";
}
}
}
I use Webstorm, the compiler outputs no errors, and the *.js and *.map.js files are created. In the browser there is no output. Only the console prints "Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7"
我使用Webstorm，编译器没有输出错误，并且创建了*.js 和*.map.js 文件。在浏览器中没有输出。只有控制台打印“Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7”
Why this exception? How do I import the classes correctly?
为什么会出现这个异常？如何正确导入类？
采纳答案by MrKWatkins
I suspect your project is set to compile each .ts file into a separate .js file. If this is the case then only Main.js will be loaded, but boat.js, car.js, etc won't have, giving you an error.
我怀疑您的项目设置为将每个 .ts 文件编译为单独的 .js 文件。如果是这种情况，则只会加载 Main.js，而不会加载boat.js、car.js 等，从而出现错误。
If you change your project to compile the output into a single file then the TypeScript compiler will use the <reference> tags to pull in the other .ts files and build a single .js file you can reference with a tag.
如果您更改项目以将输出编译为单个文件，则 TypeScript 编译器将使用 <reference> 标签来拉入其他 .ts 文件并构建您可以使用标签引用的单个 .js 文件。
If you're using Visual Studio there is an option 'Combine JavaScript output into file" under TypeScript Build of your project settings. If you using the command line compiler then the --out flag can be used to produce a single file - see http://www.typescriptlang.org/Handbook#modules-splitting-across-filesfor more info.
如果您使用的是 Visual Studio，则在您的项目设置的 TypeScript Build 下有一个选项“Combine JavaScript output into file”。如果您使用命令行编译器，则 --out 标志可用于生成单个文件 - 请参阅http ://www.typescriptlang.org/Handbook#modules-splitting-across-files了解更多信息。
回答by Gavinvin
I had a similar issue, and it was due to the html file not importing all the javascript files. To solve your situation you would add Vehicle.js, Car.js and Boat.js to your index.html file.
我有一个类似的问题，这是由于 html 文件没有导入所有的 javascript 文件。为了解决您的情况，您需要将 Vehicle.js、Car.js 和 Boat.js 添加到您的 index.html 文件中。
