CODEWITHSUNDEEP
typescript
Ralph de Ruijter
Ralph de Ruijter

Reputation: 183

How do I create Ambient Class Declarations in TypeScript

I am trying to create a .d.ts file for the KineticJS library. So far I have created the following interface declaration "kinect.d.ts".(I cropped the code a bit for stackoverflow but I hope you get the idea)

module Kinetic {

    interface Rect extends  Shape {
        constructor (config) ;
    }

    interface Shape extends Node
    { 

    }

    interface Node {
        constructor (config);
        clone(attrs): Node;
        getAbsoluteOpacity(): number;
        getAbsolutePosition(): any;       

        /*
        other methods removed for stackoverflow example
        */
    }
}

I hoped this would be enough to be able to create a Kinetic.Rect object in my app.ts file

/// <reference path="Kinetic.d.ts" />
var rect = new Kinetic.Rect({
          x: 239,
          y: 75,
          width: 100,
          height: 50        
        });

But it appears I have to do some extra work to use the KineticJS classes (like Rect) in TypeScript. Could anyone give some pointers on how to archive this?

Upvotes: 9

Views: 12323

Answers (4)

camelCase
camelCase

Reputation: 1780

Have you looked at the TypeScript example app at: http://typescript.codeplex.com/SourceControl/changeset/view/fe3bc0bfce1f#samples/imageboard/mongodb.ts

The code at this link creates a definition for the mongodb library. One difference between this and the Sohnee answer is that Sohnee implements the constructor in contrast to the following code snip from the link which is a stub class. I do not have enough reputation to ask Sohnee in the accepted answer why he implemented the constructor for an ambient class?

declare module "mongodb" {
   export class Server {
       constructor(host: string, port: number, opts?: any, moreopts?: any);
   }
   export class Db {
       constructor(databaseName: string, serverConfig: Server);
       public open(callback: ()=>void);

Upvotes: 9

Chris Rogers
Chris Rogers

Reputation: 1863

I realise this is now old, but you can find a completed kinetic.d.ts file here : http://kineticjstypescript.codeplex.com/

Upvotes: 0

Pavel Savara
Pavel Savara

Reputation: 3457

ITodoStorage is really interface, TodoStorage is implementation, but I would not like to define class, because that would force me to implement all members. Instead I make TodoStorage interface as well. Finally I declare var as constructor with new keyword.

declare interface ITodoStorage {
    get_todos() : TodoItem[];
    set_todos(value : TodoItem[]) : void;
}

declare interface TodoStorage extends ITodoStorage {
}

declare var TodoStorage : { 
    new (): TodoStorage;
}

Then I'm able to call the constructor

var storageService : ITodoStorage = new TodoStorage();

Unfortunately the var is hiding the TodoStorage type.

Upvotes: 0

Fenton
Fenton

Reputation: 250812

Here is my working example of creating ambient definitions for your Kinetic class:

interface Shape {
    x: number;
    y: number;
    width: number;
    height: number;
}

interface IKinetic {
    Rect(shape: Shape);
}

declare var Kinetic: IKinetic;

var rect = <Shape> new Kinetic.Rect({
  x: 239,
  y: 75,
  width: 100,
  height: 50        
});

Note that I have used declare var Kinetic: IKinetic; to tell TypeScript that Kinetic is of the particular type.

Update - Example 2

interface IShape {
    x: number;
    y: number;
    width: number;
    height: number;
}

interface IRect extends IShape {

}

module Kinetic {
    export class Rect implements IRect {
        public x: number;
        public y: number;
        public width: number;
        public height: number;
        constructor(rect: IShape) {
            this.x = rect.x;
            this.y = rect.y;
            this.width = rect.width;
            this.height = rect.height;
        }
    }
}

var rect = new Kinetic.Rect({
  x: 239,
  y: 75,
  width: 100,
  height: 50        
});

Upvotes: 5

Related Questions