Creating TypeScript Declaration File without Altering Existing JavaScript Code

Question

We have a fair amount of javascript that we would like to start bringing into the TypeScript world. Ideally, we would be able to create TypeScript declaration files without having to alter existing javascript code.

Below is a tiny snippet of code from Microsoft's Ajax Timer that is very much in line with the type of code that we would like to create declaration files for.

I've spent several hours trying to create a declaration file that makes TypeScript happy, but it really hasn't worked out well to this point.

How would a declaration file for the following code look?

  Type.registerNamespace("Nmspc");

  Nmspc.Timer = function () {
    Nmspc.Timer.initializeBase(this);

    this._interval = 1000;
    this._enabled = false;
    this._timer = null;
  };

  Nmspc.Timer.prototype = {
    get_interval: function() {
      return this._interval;
    },
    set_interval: function(value) {
      if (this._interval !== value) {
        // snip
      }
    },

    get_enabled: function() {
      return this._enabled;
    },
  };

xmojmr · Accepted Answer · 2014-11-07 10:45:43Z

2

If your code organization would follow the external modules pattern and your module loader would be the amd then

(1) transacript of your code into Timer.ts might look like this:

class Timer {
  private _interval: number;
  private _enabled: boolean;
  private _timer: any;

  constructor() {
    // super();

    this._interval = 1000;
    this._enabled = false;
    this._timer = null;
  }

  get_interval(): number {
    return this._interval;
  }

  set_interval(value: number): void {
    if (this._interval !== value) {
      // snip
    }
  }

  get_enabled(): boolean {
    return this._enabled;
  }
}

export = Timer;

and (2) command

tsc Timer.ts --declaration --module amd

would (3) generate Timer.d.ts which would look like this:

declare class Timer {
    private _interval;
    private _enabled;
    private _timer;
    constructor();
    get_interval(): number;
    set_interval(value: number): void;
    get_enabled(): boolean;
}
export = Timer;

The proper encoding depends on how the rest of your code base consumes the JavaScript parts of the code. Examples in https://github.com/borisyankov/DefinitelyTyped are certainly a good guides

Another possible hand-made encoding with (4) interfaces might look like:

interface ITimer {
    get_interval(): number;
    set_interval(value: number): void;
    get_enabled(): boolean;
}
interface Nmspc {
    Timer: {
        new(): ITimer;
    }
}

answered Nov 7, 2014 at 10:45

xmojmr

8,1765 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xmojmr Over a year ago

@basarat yes, this time I was faster then you :)

GaTechThomas Over a year ago

This is a fantastic answer. I have not been able to make it work without changing existing code though. I'm going to make some time tonight to try to create the simplest repeatable bit of code that is giving me trouble.

TSV · Accepted Answer · 2014-11-07 06:23:51Z

1

Does this help you?

declare module Nmspc {
    export class Timer {
        public interval: number;
        public enabled: boolean;
    }
}

answered Nov 7, 2014 at 6:23

TSV

7,6681 gold badge33 silver badges39 bronze badges

Collectives™ on Stack Overflow

Creating TypeScript Declaration File without Altering Existing JavaScript Code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related