关于javascript：Typescript：如何导入类(“未捕获的ReferenceError”)

Typescript: How to import classes (“Uncaught ReferenceError”)

我是Typescript的新手。我喜欢这样的想法，即编译器将指出大多数错误，因为他确实得到了代码。现在，我进行了一个测试项目，没有编译器错误，但是在运行时出现了异常：

未捕获的ReferenceError：未定义船(匿名函数)@ Main.ts：7

显然，导入无效。但为什么？我尝试使用amd和commonjs并得到相同的错误。

代码如下：

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>

<html>
<head>
TypeScript Test
<script data-main="main" type="text/javascript" src="require.js">
</head>
<body>



</body>
</html>

Main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13

///<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() +" "
+ vehicleTwo.do() +"" + vehicleTwo.getName() +" "
+ car.do() +"" + car.getName() +"" + car.doCar() +" ";

Vehicle.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

///<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

///<reference path='Vehicle.ts'/>

module Boat {

export class Boat extends Vehicle.Vehicle {
constructor(name:string) {
super("BOAT" + name);
}

do():string {
return"Im a boat";
}
}

}

我使用Webstorm，编译器没有输出错误，并且创建了* .js和* .map.js文件。在浏览器中没有输出。仅控制台打印" Uncaught ReferenceError：未定义船(匿名函数)@ Main.ts：7 "

为什么会出现此异常？如何正确导入类？

我怀疑您的项目已设置为将每个.ts文件编译成一个单独的.js文件。如果是这种情况，那么只会加载Main.js，而不会加载boat.js，car.js等，这会给您带来错误。

如果您更改项目以将输出编译为单个文件，则TypeScript编译器将使用标记提取其他.ts文件并构建一个可以使用标记引用的.js文件。铅>

如果您使用的是Visual Studio，则在项目设置的TypeScript Build下有一个选项"将JavaScript输出合并到文件中"。如果使用命令行编译器，则--out标志可用于生成单个文件-有关更多信息，请参见http://www.typescriptlang.org/Handbook#modules-splitting-across-files。