How do you add a jsdoc type to a destructured variable? (VSCode)

Question

So I have a response object with a data property. For this example, its data is of type text. I want the data property, and I want VSCode to recognize it types so that I can get some of that IntelliSense love.

const response = await someRequest();
const {data} = response;

First I try:

const response = await someRequest();

/** @type {string} */
const {data} = response;

Nope, so then I try:

const response = await someRequest();

const {
  /** @type {string} */
  data,
} = response;

that didn't work either.

Then I try:

/**
 * @typedef {Object} Response
 * @property {string} data
 */

/** @type {Response} */
const response = await someRequest();

const { data } = response;

That worked!

I'm not sure how much of a difference it makes, but I'm using VSCode September 2020 (version 1.50).

Edits: I changed how my question ended because it turned out that my final example actually works...

Answer 1

The simple way to jsdoc it is as follows:

/** @type {{data:string}} */
const response = await someRequest();
const {data} = response;

Even better if you have control of the someRequest function is to jsdoc it like so:

/** @returns {Promise<{data:string}>} */
async function someRequest() {
  return {data: ""};
}

const response = await someRequest();
const {data} = response;

Finally, for completeness, you can inline it a few places. Here's an example:

const {data} = /** @type {{data:string}} */ (await someRequest()) || {};