Question

我是新手稿。我喜欢这个想法，编译器会将错误指出最多，因为他真的得到了代码。现在我已经完成了一个测试项目，没有编译器错误，但在运行时出现了异常：

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

显然进口不起作用。但为什么？我尝试使用amd和commonjs并得到了同样的错误。

这里是代码：

的index.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

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

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

///<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：Boat is not defined（anonymous function）@ Main.ts：7”

为什么这个例外？如何正确导入类？

Answer 1

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

如果更改项目以将输出编译为单个文件，则TypeScript编译器将使用＆lt; reference＆gt;标记以引入其他.ts文件并构建一个可以使用标记引用的.js文件。

如果您正在使用Visual Studio，则可以选择“将JavaScript输出合并到文件中”＃34;在TypeScript构建项目设置下。如果使用命令行编译器，则可以使用--out标志生成单个文件 - 有关详细信息，请参阅http://www.typescriptlang.org/Handbook#modules-splitting-across-files。

Answer 2

我有一个类似的问题，这是由于html文件没有导入所有的javascript文件。要解决您的情况，您可以将Vehicle.js，Car.js和Boat.js添加到index.html文件中。

打字稿：如何导入类（“Uncaught ReferenceError”）

2 个答案: