As I work on my project, I encounter the challenge of importing an object created by a dynamic function. The dynamic nature of the keys on this object poses a problem for the IDE, as it cannot determine what keys are present based on the provided config. To address this, my solution is to create a .d.ts file that outlines the object's structure, enabling users to easily identify its keys through code completion in the IDE.
// dynamicObject.js
export default makeAnObject(config);
// useObject.js
import someObject from './dynamicObject.js';
const result = someObject.| (code editor dropdown of keys here)
In addition, I prefer not to have the .d.ts file located in the same directory as these files. I believe that the tsconfig.json file can manage this setup, although I am uncertain about the syntax required for the .d.ts file. Being relatively unfamiliar with TypeScript, I find the documentation to be lacking in clarity.
For my dynamicObject.d.ts file, my initial attempt looks like this:
declare namespace someObject {
interface oneKey {
nestedKey: string
}
}
Despite this declaration, the code editor remains unaware of the object's composition. I am unsure if the issue lies with the way I am structuring the .d.ts file or if there is a configuration missing in the tsconfig.json file?
EDIT: I will now share my tsconfig.json file, as the initial solution did not yield the desired results. I aim for a basic configuration, but I suspect it may require additional elements:
{
"compileOnSave": true,
"compilerOptions" : {
"baseUrl": "./",
"paths": {
"*" : ["myCustomTypings/**.d.ts"]
}
}
}
EDIT2 After temporarily shifting the .d.ts file to the same directory as dynamicObject.js (renaming it as dynamicObject.d.ts), the IDE now recognizes it as typeof someObject, yet still struggles to ascertain the object's structure. How should I describe the object in dynamicObject.d.ts?