AllowJs - ts-check - Cannot find namespace

[jantimon]

Code

node_modules/@types/thirdParty/index.d.ts

export = demo;
declare namespace demo {
  foo: number;
}

main.js

// @ts-check
/// <reference types="thirdParty" />
const x: demo.foo;

Expected behavior:

I should be able to use the type foo of demo.
The example from above would work if but only if the thirdParty plugin also exports its namespace:

export as namespace demo;

I couldn't find any docs on what exactly export as namespace does.
Proably it would just add it to the global namespace which might not be the desired solution.

Actual behavior:

Without the exported namespace I receive error messages which are not helpful at all:

error TS2304: Cannot find name 'demo'
error TS2503: Cannot find namespace 'demo'

Suggestion:

Could we import everything which is exported from the index.d.ts file (like export = demo) to a name?
This would be useful for --allowJs checks where we can't import typings from another file.

// @ts-check
/// <reference types="thirdParty" name="thirdParty" />

[aluanhaddad]

What is the shape of the actual package at runtime?

If demo is available as a global then the declaration needs to be updated to add the export as namespace demo clause as you described.

If it isn't available globally, then you won't be able to use it without importing its value in which case you will have access to the types.

[jantimon]

In my hypothetical example demo won't be globally available.
How would it be possible to import types from that thirdParty plugin into a .js file which is using @ts-check?

[aluanhaddad]

If it's not available globally than using <reference types="..."/> is not correct.

How would it be possible to import types from that thirdParty plugin into a .js file which is using @ts-check ?

Different approaches are possible depending on how you load modules but let's say you're using CommonJS.

var demo = require('demo');

/**
  * @param x {demo.SomeType}
  */
function f(x) {}

It's worth mentioning that there is a syntax error in the declaration in the OP so it will not work as written.

[aluanhaddad]

Sorry, it appears that doesn't work. I thought it was supposed to work.

var demo = require('demo');

/**
  * @param {demo.SomeType} x // error: Cannot find namespace demo.
  */
function f(x) {}

But it works correctly when imported as the synthetic default using ESM syntax.

import demo from './demo';

/**
  * @param {demo.SomeType} x // OK
  */
function f(x) {x}

[jantimon]

Unfortunate the oss ecosystem I am working on (webpack) still supports node 4 which is years away from ESM.. is there any other possible solution which doesn't require transpiling?

[aluanhaddad]

No, but since are already using Webpack, you can just use the synthetic default form. Recent versions of Webpack perform the hoisting.

I do think this is a bug however.

[jantimon]

I am not using webpack but developing a webpack plugin

[aluanhaddad]

You could always use tsc to transpile your JavaScript 😉 it will remove the import since it is only used in type position when it runs, but at that point you might as well just use TypeScript directly.

[jantimon]

What might be a propper way to resolve this bug?
Is there anything I can do to fix it?

[DanielRosenwasser]

You can potentially import into a .d.ts file that globally augments the type space.

Also see

• [Salsa] Provide a JSDoc equivalent of import { ..} from "mod" #14377
• Imported namespaces aren't recognized in --checkJs #16489
• checkjs doesn't allow type annotations with types from required modules #18460
• JSDoc cannot resolve namespaces from required modules #19476

[aluanhaddad]

@DanielRosenwasser I'm just wondering if this is the intended behavior.

Perhaps it's a naive assumption but it seems like this scenario could be enabled and would be more natural for reusing existing declaration files.

I realize that import..require has special semantics but does it have to? Could var..require behave similarly in this context?

[DanielRosenwasser]

I'm just wondering if this is the intended behavior.

No, I do think this should just work.

[jantimon]

Thanks for all the additional information @DanielRosenwasser - #16489 and #18460 are almost duplicates for this topic and it seems the feature was added to the typescript 2.7 milestone by @mhegazy

[typescript-bot]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.