Create Class From Hybrid Interface Type - interface

Question

First of all, I'm very new to TS, and during my reading in
http://www.typescriptlang.org/Handbook I stop at trying to understand how Hybrid Types Interface works.
In the example of the TS:
interface ICounter {
(start: number): string;
interval: number;
reset(): void;
}
var c: ICounter;
c(10);
c.reset();
c.interval = 5.0;
So, the problem was when I tried to write a class using this interface, the problem was the line:
(start: number): string;
First I thought that this line represents a function so tried to create:
class Test implements ICounter {
interval: number;
reset(): void { }
start(start: number): string {
return "";
}
}
But this keep showing that "Types Test and ICounter have incompatible signatures", so what I'm missing here? I thought that interfaces should work the same way for classes and variables.

Answer 1

ICounter represents a function that has two properties—interval and reset.
This line in the interface...
(start: number): string;
...describes a way to call the function. It's shown in the example as:
c(10)
The other lines describe the function's properties—interval and reset.
c.reset();
c.interval = 5.0;
As stated in the handbook, this is used for representing JavaScript libraries that do this. So for example, the above could represent the following JavaScript code:
function counter(start) {
alert(start);
return "some string";
}
counter.reset = function() { alert('reset called'); };
counter.interval = 1;
In addition to all this, note that the class you described could be represented by the following interface:
interface ITest {
interval: number;
reset: () => void;
start: (start: number) => string;
}

Answer 2

class implies that you will create instances via new operator. new creates object, not function, so it is impossible to implement class, which instances can called as function. You can do something like this:
interface ICounterObject {
interval: number;
reset(): void;
}
interface ICounter extends ICounterObject {
(start: number): string;
__proto__: ICounterObject;
}
class Test implements ICounterObject {
static createCounter(): ICounter {
var counter = <ICounter>function (start: number): string {
return "";
};
counter.__proto__ = Test.prototype;
return counter;
}
interval: number;
reset(): void { }
}
Note, __proto__ is from ES6, but de-facto is supported in ES5 browsers. If you want to use function prototype members (e.g call and apply) mix prototypes:
function mixWithFunc<T extends Function>(obj: { __proto__?}, func: T) {
var objProto = <{ constructor }>obj.__proto__;
var objClass = <{ __mixedProto__ }>objProto.constructor;
var proto = <typeof obj>objClass.__mixedProto__;
if (!proto) {
proto = {};
proto.__proto__ = objProto;
['call', 'apply', 'bind'].forEach(p => proto[p] = Function.prototype[p]);
objClass.__mixedProto__ = proto;
}
(<typeof obj>func).__proto__ = proto;
Object.getOwnPropertyNames(obj).forEach(p => func[p] = obj[p]);
return func;
}
interface ICounter extends Counter {
(start: number): string;
}
class Counter {
static create() {
var self: ICounter = mixWithFunc(
new Counter(),
<ICounter>function (start: number) {
return "started with interval: " + self.interval;
});
return self;
}
interval = 1000;
reset() { this.interval = 0; }
}
Of course you can just add members to each instance of your function instead of prototyping.