Vfrdtyky

I am attempting to annotate all my JavaScript functions and class properties with JSDoc to enable proper type checking using TypeScript and the checkJS option.

However, since I want to support older browsers (IE9), and I do not want to transpile the code using Babel, I need to use ES5-era JavaScript and cannot use "class" to define a class. Therefore, I need to resort to plain old function prototypes.

In the project I'm working on, I have the following class:

/**

 * A condition class, executes a set function on results that meet their required conditions.

 * @class

 * @template T

 */

function Condition()

{

  /** @type {{condition?: boolean, result: T}} A list of conditions to execute. */

  this.list = new Array();

}



/** 

 * Adds a condition

 * @param {{condition: boolean, result: T}} condition The object with the condition and the result to be sent to the executing function.

 */

Condition.prototype.add = function(condition)

{

  this.list.push(condition);

}



/**

 * Executes the added conditions.

 * @param {function(T):void} action The function to be executed when a condition is true.

 */

Condition.prototype.execute = function(action)

{

  this.list.forEach(function(condition) { if(condition.condition) action(condition.result); });

}

In this class, the result element is always of the same type within the same class instance, making this a perfect use case of a template, as can be seen in the code.

However, when I attempt to use the class using, for example, the following code:

var conditionList = /**@type {Condition<string>} */(new Condition());

conditionList.add({ condition: true, result: 'yes' });

conditionList.execute(function(value) { console.log(value); });

I get the following error in VSCode:

Type 'string' is not assignable to type 'T'.
The expected type comes from property 'result' which is declared here on type '{ condition: boolean; result: T; }'

When I hover the mouse on conditionList, the popup says: var conditionList: typeof Condition.

Changing the conditionList declaration to var /**@type {typeof Condition<string>} */(new Condition()); also does not work, and throws an error saying that typeof Condition cannot be converted to typeof Condition.

Therefore I have no idea on what to do in order to allow the template to work, while keeping the ES5 class declaration style.

However, if i convert the code to an ES6-style class (class Condition), and I keep the annotations just as they are, then the code works properly. In that case, hovering over conditionList results in a popup saying var conditionList: Condition<string> and there are no errors.

Is there any way to get the same behavior using the ES5 style classes? Am I missing something? Or might this be something unimplemented in VSCode's TypeScript checker?

It seems to be a bug, and has an open issue in Github. It seems it will not be fixed until TypeScript 3.3 is out unfortunately:

https://github.com/Microsoft/TypeScript/issues/26883