扩展javascript“class”(对象)

时间:2013-05-24 14:55:45

标签: javascript inheritance typescript

我正在使用javascript库(pixi.js是具体的),我正在尝试在typescript中扩展其中一个类。但是,尝试像下面这样扩展类会产生错误。

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);**

}

How to extend native JavaScript array in TypeScript 我知道这个anwser建议使用一个接口,但我真的想阻止编写包装器。 我更愿意找到一种方法来在使用超级方法时抑制错误,或以某种方式从javascript类中获取类型信息。

1 个答案:

答案 0 :(得分:2)

你的第一段代码只为我做了一些小改动。

这就是我的所作所为:从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);

然后我在一个html文件中测试了它,其中pixi.js包含在之前自定义代码,如下所示:

<!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文件的方式,但这些步骤中的内容应该有所帮助。