JSDoc 用于具有作为类实例的键的对象

Question

The title might be a bit unclear, but here's a code:

fruits.js

class Fruit {
  constructor(color, taste) {
    this.color = color;
    this.taste = taste;
  }

  get fruitColor() {
    return this.color;
  }

  get fruitTaste() {
    return this.taste;
  }
}

const Fruits = {
  APPLE: new Fruit("green", "sweet"),
  LEMON: new Fruit("yellow", "sour"),
};

module.exports = { Fruits };

my.class.js

const { Fruits } = require("./fruits");

class MyClass {

  // I want a jsdoc here in order to get intellisense
  // and be able to have access to all fruit methods like 'fruitColor'
  getFruitColor(fruit) {
    return fruit.fruitColor;
  }

  getAppleColor() {
    return this.getFruitColor(Fruits.APPLE);
  }
}

module.exports = new MyClass();

index.js (does not actually matters in terms of the question)

const MyClass = require("./my.class");

const appleColor = MyClass.getAppleColor();
console.log(appleColor);

So I have this object Fruits . Each key value of it is an instance of the class Fruit (but with a different properties). When I'm passing this object's property as an argument I want to document it so I can get intellisense inside a function which accessing the 'Fruit' class methods.

Of course I don't want to hardcode it's properties because object Fruits can have lot's of different keys (orange, pineapple, pear etc. ).

Is ther some way to say something like:

/**
* @param {propertyvlaue of type Fruits}
*/

or

/**
* @param {fruit: <typeof Fruits.>}
*/

Or should I maybe use @typedef somewhere in MyClass ?

UPD: After trying to understand Graham P Heath answer I tried:

const { Fruits } = require("./fruits");

class MyClass {
  /**@param {Object.<string, Fruit>} */
  getFruitColor(fruit) {
    return fruit.fruitColor;
  }

But the problem is that MyClass does not know anything about class Fruit (which is the value of each key inside Fruits object)

Answer 1

The way to indicate a type of an Object's keys is to use Object<keyType, valueType> . For example:

/** @typedef {(string|boolean)} */
const Sometype = null;

/** @type !Object<!Sometype, string> */
const objectWithCustomKeyTypes = {}

objectWithCustomKeyTypes['foo'] = 'is a string';
objectWithCustomKeyTypes[25] = 'is a number';

In this example, the last line throws a warning:

input0:8:25: WARNING - [JSC_TYPE_MISMATCH] restricted index type
found   : number
required: (boolean|string)
  8| objectWithCustomKeyTypes[25] = 'is a number';
                          ^^

While I've used a simple type def to demonstrate that this works with custom types, it should work with built in and third party types as well.

Ref: Types in the Closure Type System

Answer 2

I also came across the same problem few weeks ago and typescript has an interesting feature ReturnType , make sure to check it once!

and you can change it to something like:

function Fruits() {
  return {
      APPLE: new Fruit("green", "sweet"),
      LEMON: new Fruit("yellow", "sour"),
  }
};
var fruit = Fruits();
fruit.APPLE //Correct
fruit.dummy //Error

and when you write:

type T4 = ReturnType<typeof Fruits>;
//will infer to on tooltip
//type T4 = {
//    APPLE: Fruit;
//    LEMON: Fruit;
//}

UPDATED playground