Declare a Javascript global namespace object in VSCode

Question

I have a new Javascript environment rather than Node.js or Browser and it has a new global object GameGlobal, acting like global in Node.js or window in Browser. So if I assign a property to GameGlobal (e.g. GameGlobal.THREE = 3), the property (by THREE not GameGlobal.THREE) can be used in any module. Unfortunately, VSCode cannot recognize it.

/// <reference path="../../index.d.ts" />

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents
//import * as THREE from './js/three.module' //export {...}; cannot be recognized by the WeXin Developer Tool
//import * as THREE from 'three.min'

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only
//if ('object' == typeof GameGlobal) GameGlobal.initAndStart = initAndStart;
//if ('object' == typeof module) {
//module.exports = initAndStart; //<=> export default function initAndStart() {}
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting
GameGlobal.THREE = require('three'); // <=> import * as THREE from 'three'
//import './SubdivisionModifier.js'
/** @type {typeof import('./TransformControls.js').TransformControls} */
GameGlobal.TransformControls = require('TransformControls').TransformControls; // <=> import { TransformControls } from './TransformControls.js'
//}


/// <reference path="../../node_modules/minigame-api-typings/index.d.ts" />
//https://github.com/wechat-miniprogram/minigame-api-typings
//install type definitions (DefinitelyTyped): npm install minigame-api-typings

//https://vscode-docs1.readthedocs.io/en/stable/languages/javascript/#defining-global-variables-outside-dts
/* global GameGlobal */

GameGlobal.mexport = function () { }
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only
//import './js/sdk.js'： Import an entire module for side effects only, without importing anything.
//This runs the module's global code, but doesn't actually import any values.

//import THREE from "three"


/** @param {THREE.Intersection} intersection*/
function onclick(intersection) {
    intersection.object;
}

In the above example, even if GameGlobal.THREE = require('three'), but the tooltip on both THREE and Intersection in @param {THREE.Intersection} showed me "any".

Also, I referred to Defining Global Variables Outside .d.ts, but it didn't work.

IntelliSense Support

VS Code provides IntelliSense for built-in symbols of browsers, Node.js, and virtually all other environments through the use of type definition .d.ts files. DefinitelyTyped is a repository of typings files for all major JavaScript libraries and environments. The typings are easily managed using TSD, the TypeScript Definition manager. IntelliSense is automatically provided for CommonJS and AMD modules inside your project folders.

So, is there any way that I can customize and add such a global namespace object GameGlobal for VS Code IntelliSense? I believe the key is probably to provide a .d.ts file.

I created and opened a single js file in VSCode and then used the below code. It gave me tooltips as following comments:

if ('object' == typeof global) {
    //in Nodejs environment
    //The tooltip shows "any" and then 'module global'.  think it's valid in node.js. 
} else if ('object' == typeof window) {
    //in a browser environment
    //The tooltip shows "var window: Window & typeof globalThis". I think it's valid in browsers. 
}
if ('object' == typeof globalThis) {
    //The tooltip on `globalThis` shows "module globalThis"
}

global.GameGlobal = global;
//window.GameGlobal = window;
GameGlobal.THREE = {
    Vector2: { x: 0, y: 0 }
};
THREE //the tooltip shows "any"
console.log('THREE:', THREE.Vector2.x); //THREE: 0

After reading Using globalThis in Typescript, I wrote a global.d.ts.

// <reference path="./wx/index.d.ts" />
// <reference path="../../../node_modules/three/src/Three.d.ts" />

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
//https://github.com/es-shims/globalThis

//https://github.com/Microsoft/TypeScript/issues/15626
//https://vscode-docs1.readthedocs.io/en/stable/languages/javascript/#defining-global-variables-outside-dts
// @typedef {GameGlobal.THREE} THREE GameGlobal.THREE: typeof require('three')

declare global {
    var GameGlobal: global;
}
//declare let GameGlobal = global & Window & typeof globalThis;
//declare var GameGlobal: Object;
declare var THREE: typeof import('three');

/**
 * contains basic information about a physical font. All sizes are specified in
 * logical units; that is, they depend on the current mapping mode of the display context.
 */
declare class TextMetric {
    /**
     * Is a `double` giving the calculated width of a segment of inline text in CSS pixels.
     * It takes into account the current font of the context.
     */
    width: number;
    height: number;
}

/**
 * Measures the dimensions of a piece of text in the canvas.
 * @param {CanvasRenderingContext2D} context
 * @param {string} text The text `String` to measure.
 * @return {TextMetric} A `TextMetric` object
 * @see https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas
 */
declare function measureText(context: CanvasRenderingContext2D, text: string): TextMetric;

I found just when I used import THREE from 'three', VSCode could show the correct tooltips both on the code THREE.Vector2 and on the comment @param {THREE.Vector2}, but it was not what I expected.

• Expose global declarations on window

• Root scope type

• Node.js v13.9.0 Documentation: Global Objects

  These objects are available in all modules.

  The objects listed here are specific to Node.js. There are built-in objects that are part of the JavaScript language itself, which are also globally accessible.

  global

  Added in: v0.1.27

  • The global namespace object.

    In browsers, the top-level scope is the global scope. This means that within the browser var something will define a new global variable. In Node.js this is different. The top-> level scope is not the global scope; var something inside a Node.js module will be local to that module.

• MDN: Standard built-in objects

  The term "global objects" (or standard built-in objects) here is not to be confused with the global object. Here, "global objects" refer to objects in the global scope.

  The global object itself can be accessed using the this operator in the global scope. In fact, the global scope consists of the properties of the global object, including inherited properties, if any.

• minigame-api-typings