"declare class" in a global is not visible in external files

[jayshah123]

🔎 Search Terms

"declare class" in a global is not visible in external files,
extending typescript global object with "declare class",
declared class in global not found,
typescript globals.d.ts declared global class not found

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about globals and declaration files here

⏯ Playground Link

https://github.com/jayshah123/typescript-declare-global-class-issue

💻 Code

// global.d.ts
export { };

declare global {
    var myGlobalVariable: string;
    class WorldClass {
        constructor();
        important: number;
    }
}

// index.ts
const w = new global.WorldClass(); // Property 'WorldClass' does not exist on type 'typeof globalThis'.ts(2339)
\
const h = global.myGlobalVariable;

console.log(h);

🙁 Actual behavior

Class declared in global not allowed

🙂 Expected behavior

Class declared in global should be allowed.

Additional information about the issue

No response

[MartinJohns]

Your "Playground" link does not work and leads to a 404.

[jayshah123]

Your "Playground" link does not work and leads to a 404.

It's a github link as I need more than one file: https://github.com/jayshah123/typescript-declare-global-class-issue

[MartinJohns]

And I'm telling you that your link doesn't work, it leads to a 404 page. Perhaps you have set it to private.

[whzx5byb]

See #39504 (comment)

That’s because class, let and const don’t create own properties on the global object, instead they create variable bindings on a Declarative Environment Record, so this is the expected behaviour.

If you still want to do this, try this workaround.

declare global {
    namespace globalThis {
        class WorldClass {
            constructor();
            important: number;
        }
        export { WorldClass }
    }
}

const w = new global.WorldClass(); // OK

[jayshah123]

And I'm telling you that your link doesn't work, it leads to a 404 page. Perhaps you have set it to private.

My bad, made it public

[jayshah123]

Is this a common pattern for globals class declaration - declare interface + declare var,

/**
 * The URL interface represents an object providing static methods used for creating object URLs.
 *
 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/URL)
 */
interface URL {
    hash: string;
    host: string;
    hostname: string;
    href: string;
    toString(): string;
    readonly origin: string;
    password: string;
    pathname: string;
    port: string;
    protocol: string;
    search: string;
    readonly searchParams: URLSearchParams;
    username: string;
    toJSON(): string;
}

declare var URL: {
    prototype: URL;
    new(url: string | URL, base?: string | URL): URL;
    canParse(url: string | URL, base?: string): boolean;
    createObjectURL(obj: Blob | MediaSource): string;
    revokeObjectURL(url: string): void;
};

if the behavior mentioned in the issue description is an expcted one,
should we add this to FAQ?

[fatcerberus]

The behavior mentioned matches JS runtime behavior:

<script>
class Foo {}
console.log(Foo);  // [class Foo]
console.log(globalThis.Foo);  // undefined
</script>

I don't think it needs to be documented separately if the types match the runtime reality.