web-dev-qa-db-ja.com

Typescript：クラスをインポートする方法（ "Uncaught ReferenceError"）

TypeScriptは初めてです。私は、コンパイラが実際にコードを取得するため、コンパイラがエラーを最も指摘するという考えが好きです。これで、テストプロジェクトを作成しました。コンパイラエラーはありませんが、実行時の例外です。

ncaught 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ファイルが作成されます。ブラウザには出力がありません。コンソールのみが「UncaughtReferenceError：Boat is not defined（anonymous function）@ Main.ts：7」と出力します。

なぜこの例外？クラスを正しくインポートするにはどうすればよいですか？

javascriptclassooptypescriptwebstorm
10
Moritz Göckel

あなたのプロジェクトは、各.tsファイルを別々の.jsファイルにコンパイルするように設定されていると思います。この場合、Main.jsのみがロードされますが、boat.js、car.jsなどにはロードされないため、エラーが発生します。

プロジェクトを変更して出力を単一のファイルにコンパイルすると、TypeScriptコンパイラは<reference>タグを使用して他の.tsファイルをプルし、タグで参照できる単一の.jsファイルを作成します。

Visual Studioを使用している場合は、プロジェクト設定のTypeScriptビルドの下に[JavaScript出力をファイルに結合する]オプションがあります。コマンドラインコンパイラを使用している場合は、-outフラグを使用して単一のファイルを生成できます。 http://www.typescriptlang.org/Handbook#modules-splitting-across-files 詳細については。

8
MrKWatkins

同様の問題が発生しましたが、これはhtmlファイルがすべてのjavascriptファイルをインポートしていないことが原因でした。状況を解決するには、Vehicle.js、Car.js、Boat.jsをindex.htmlファイルに追加します。

2
Gavinvin