扩展javascript“类”（对象）答案

【问题标题】：Extending javascript "class" (object)扩展javascript“类”（对象）
【发布时间】：2013-05-24 14:55:45
【问题描述】：

我正在使用一个 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 类中获取类型信息。

【问题讨论】：

标签： javascript inheritance typescript

【解决方案1】：

您的第一个代码块对我有用，只需进行几个小改动。

这就是我所做的：从 https://github.com/GoodBoyDigital/pixi.js/blob/master/bin/pixi.dev.js 下载 Pixi 库；从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>

我不确定您的问题是否在于您缺少引用声明文件、缺少扩展关键字，或者您如何在 html 中包含 js 文件，但这些步骤中的某些内容应该会有所帮助。

【讨论】：

我不知道 pixi 有声明文件。不过，我仍然讨厌依赖开发人员提供的服务。
不幸的是，没有办法解决这个问题。幸运的是，您可以自己制作，并且有人已经这样做了。