TypeScript type declaration (d.ts) for destructing function payload

Question

Using WebStorm. TypeScript v4.6.2

I have a function inside regular JavaScript file index.js . Next to it I have types declaration file index.d.ts . The sole purpose of this type declaration file is to get autocomplete suggestions.

Inside JS file I have a function:

module.exports.myFunction = async ({foo}) => {
  foo. // <-- expecting to get suggestion "bar"
}

How TypeScript types declaration file need to look to provide autocomplete for bar which is inside of this foo ?

Trying to do like so:

interface payload {
  foo: {
    bar: string;
  };
}

declare function myFunction(object: payload): any;

export default myFunction;

Getting such "suggestions":

If I require this myFunction from any other location, then I do get the suggestions as expected, but I want to get that suggestion inside of myFunction itself:

Files structure:

Answer 1

TypeScript does not work in a magic way, in your case the best way to make it work is to export the interface and import it in a JSDoc comment to be usable in the function typing. So your files should look like this:

// index.d.ts file

export interface Payload { // Interface name should be capitalized
  foo: {
    bar: string;
  };
}

// index.js file

/**
 * @typedef {import('.').Payload} Payload
 */

/**
 * @param {Payload} param
 */
const myFunction = async ({ foo }) => {
  foo. // <-- You will get here the suggestion for "bar"
};

module.exports = { myFunction };