Проблема с использованием нотации JSDoc в VS Code для ссылки на определения типов Webpack

Question

Я столкнулся с интересной проблемой.Я настраиваю свою конфигурацию Webpack в проекте, который не использует TypeScript.Однако я подумал, что было бы здорово использовать нотацию JSDoc и intellisense кода VS для обеспечения формы интерфейса конфигурации.

Сначала я думал, что могу просто установить определения типов (@types/webpack), а затем использоватьдиректива тройной косой черты для ссылки на эти типы.Однако это не сработало, и мне пришлось проявить креативность.

Так что это не сработало:

/// <reference types="webpack" />
// @ts-check

/**
* @param {'production' | 'development' | 'none'} mode
*/
module.exports = (mode) => {
    /** @type {webpack.Configuration} */
    const config = {
        mode,
        output: {}
    };
    return config;
};

Однако это сработало:

// @ts-check

// @ts-ignore
// eslint-disable-next-line
const webpack = require('webpack');

/**
* @param {'production' | 'development' | 'none'} mode
*/
module.exports = (mode) => {
    /** @type {webpack.Configuration} */
    const config = {
        mode,
        output: {}
    };
    return config;
};

Я ожидаю, что версия с тройной косой чертой будет разрешать типы, однако в результате TS жалуется, что не может найти пространство имен webpack.Однако, когда я предоставляю объект (и говорю всем моим инструментам игнорировать тот факт, что я не использую эту переменную), TS в порядке.

Так что, хотя у меня есть кое-что, что работает, это немного уродливо.Мне также любопытно, что мне не хватает, когда дело доходит до директив тройного слэша.

РЕДАКТИРОВАТЬ:

Нашел другой подход, который работает довольно хорошо.Все еще немного грязнее, чем хотелось бы, но лучше, чем иметь объект, который мне не нужен в коде:

/** @typedef {import('webpack').Configuration} Configuration */