Currently, I am in the process of developing a React JavaScript project using WebStorm and attempting to enable type hinting for our IDEs (including VS Code) by utilizing TypeScript interfaces and JSDoc annotations. Our goal is to potentially transition to full TypeScript in the future.
The setup works smoothly when referencing the namespace and interface without any imports in the file:
//cart.js
/**
* @returns {Prep.Cart}
*/
export const fetchCart = (cached = false, type = queryTypes.FULL) =>
//cart.ts
declare namespace Prep {
export interface Cart {
CustomerNumber: number
// ...
}
}
However, an issue arises with the error
TS2503: Cannot find namespace Prepimport statement in the TypeScript file containing the interface:
//cart.js
/**
* @returns {Prep.Cart}
*/
export const fetchCart = (cached = false, type = queryTypes.FULL) =>
//cart.ts
import {Model} from 'sequelize'
declare namespace Prep {
export interface Cart extends Model {
CustomerNumber: number
// ...
}
}
If an additional file defining the namespace is introduced separately, then the error
TS2694: Namespace Prep has no exported member Cart// prep.ts
declare namespace Prep {}
Evidently, it appears that including an import in one of these TypeScript files causes any exports or declarations from it to go unrecognized.
Is there a more effective or alternative approach to achieve this, allowing seamless reference to both the namespace and interface while extending another type imported from a different file or package?
Moreover, I have configured jsconfig.json and tsconfig.json for automatic detection, and everything else functions as intended except when importing in the TypeScript file.