1

私はjavascriptライブラリ（具体的にはpixi.js）を使用しており、typescriptでそれらのクラスの1つを拡張しようとしています。ただし、以下のようにクラスを拡張しようとするとエラーが発生します。

module tilesystem {

    declare var PIXI;
    // Class
    export class Tilegrid PIXI.DisplayObjectContainer
    {
        public layers : number= layers;
        public rows : number= rows;
        public columns : number = columns;
        public tilesize : number = tilesize;
        // Constructor
        constructor(layers, columns, rows, tilesize, stage, texture)
        {
            super( );
           //implementation
        }
    }

    //Tilegrid.constructor = Tilegrid;
    Tilegrid.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);

}

エラー ：

基本型 'any' には実装がありません。

醜いJavaScriptの方法で拡張するだけで問題ありませんが、それでもそれがスーパーメソッドであることを知らないと文句を言うでしょう。

module tilesystem {

    declare var PIXI;
    // Class
    export class Tilegrid
    {
        public layers : number= layers;
        public rows : number= rows;
        public columns : number = columns;
        public tilesize : number = tilesize;
        // Constructor
        constructor(layers, columns, rows, tilesize, stage, texture)
        {
            **PIXI.DisplayObjectContainer.call(this);**
           *this.addChild( new Tile() );* //throws an error, because addChild is not known
        }
    }

    **Tilegrid.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);**

}

TypeScript でネイティブ JavaScript 配列を拡張する方法 この anwser がインターフェイスの使用を提案していることは知っていますが、ラッパーの記述を防止したいと考えています。スーパーメソッドを使用するときにエラーを抑制するか、javascript クラスから何らかの形で型情報を取得する方法を見つけたいと思います。

4

1 に答える 1

2

あなたの最初のコード ブロックは、2、3 のマイナーな変更でうまくいきました。

これが私がしたことです: https://github.com/GoodBoyDigital/pixi.js/blob/master/bin/pixi.dev.jsから Pixi lib をダウンロードしました。https://github.com/xperiments/Pulsar/blob/master/src/libs/pixi.d.tsから宣言ファイルをダウンロードしました。ソースから削除declare var PIXI;し、キーワードextendsとそれが機能することを知るためのアラートを追加したので、次のようになります。

/// <reference path="pixi.d.ts" />

module tilesystem {
    export class Tilegrid extends PIXI.DisplayObjectContainer {
        public layers: number = layers;
        public rows: number = rows;
        public columns: number = columns;
        public tilesize: number = tilesize;
        constructor(layers, columns, rows, tilesize, stage, texture) {
            super();
            alert("I ran");
        }
    }
}

var x = new tilesystem.Tilegrid(null, null, null, null, null, null);

次に、次のようにカスタムコードの前にpixi.jsが含まれているhtmlファイルでテストしました。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
    <script src="pixi.dev.js"></script>
    <script src="output.js"></script>
</body>
</html>

問題が宣言ファイルの参照不足にあるのか、extendsキーワードの欠落にあるのか、htmlにjsファイルを含める方法にあるのかはわかりませんが、これらの手順の何かが役立つはずです.

于 2013-05-24T16:08:22.590 に答える