Extending javascript "class" (object)

Question

I'm using a javascript library (pixi.js to be specific) and I'm trying to extend one of their classes in typescript. However, trying to extend the class like below will yield an error.

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

}

error :

Base type 'any' lacks an implementation.

I would be fine with just extending it the ugly javascript way, but that then it will still complain about not know it's super methods.

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 I know that this anwser suggest using an interface, but I would really like to prevent writing wrappers. I would much rather find a way to either supress the error when using super methods, or somehow get the type info from the javascript class.

Jeffery Grajkowski · Accepted Answer · 2013-05-24 16:08:22Z

Your first block of code worked for me with just a couple minor changes.

Here's what I did: downloaded the Pixi lib from https://github.com/GoodBoyDigital/pixi.js/blob/master/bin/pixi.dev.js ; downloaded a declaration file from https://github.com/xperiments/Pulsar/blob/master/src/libs/pixi.d.ts ; removed declare var PIXI; from the source, added the keyword extends and an alert to know it works so it looks like this:

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

Then I tested it in an html file where pixi.js is included before the custom code like so:

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

I'm not sure if your problem is in your lack in referencing a declaration file, the missing extends keyword, or how your include js files in your html but something in those steps should help.

I had no idea pixi had the declaration file. I still sort off hate being dependant on the developer supplying one though. — Noktai, Commented May 25, 2013 at 18:18
Unfortunately there's no way around that. Fortunately you can make your own and there are repos where people have done just that. — Jeffery Grajkowski, Commented May 29, 2013 at 17:54

Collectives™ on Stack Overflow

Extending javascript "class" (object)

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related