Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Access TypeScript class outside bundled code
I'm developing the design framework for a certain Q&A site. We are currently using an external dependency for the tag selector on the post editor, but it has some disadvantages (not fitting into the design system, not working well without JavaScript, ...). Hence I want to implement a tag autocomplete component in the design framework.
We precompile and precheck the JavaScript by using TypeScript in combination with the npm module "typescript-bundle", which bundles the files into one file.
The command we use to compile the JavaScript is basically 1
tsc-bundle tsconfig.json
Our tsconfig.json file is:
{
"compilerOptions": {
"removeComments": true,
"outDir": "./js/",
"outFile": "./js/co-design.js",
"rootDir": "./js_src/",
"target": "ES5",
"alwaysStrict": true
}
}
Now I have a file that contains this class definition:
export default class AutoComplete {
private readonly refersToElement: HTMLElement;
constructor(refersToElement: HTMLElement) {
this.refersToElement = refersToElement;
/* ... */
}
/* ... */
static find(query: string) {
const element = document.querySelector(query);
return new AutoComplete(element as HTMLElement);
}
};
Unlike other components, which are invoked by the primary TypeScript file by a general selector, I want this class to be available throughout the site's JavaScript, because it will need to be configured quite much (ex.: tag query and filtering) in comparison to other TS modules. As we have our own "design framework", the Q&A software uses an additional JavaScript codebase, which can't be build together with the Co-Design JS.
However, when I try to access it in "normal JavaScript", I get a Uncaught ReferenceError: AutoComplete is not defined. I tried exporting it from the primary TypeScript file, which didn't work either.
What can I do to make AutoComplete available in non-TS JavaScript?
-
I say basically, because the actually used command is a bit more complex as it is also compiling the SCSS and moving some files around, but that isn't relevant here. ↩
1 answer
Easy enough: if this code is only ever going to be used in a browser, just add it to the Window object:
export default class AutoComplete {
// ...
};
window.AutoComplete = AutoComplete;
You can also do this from a general/index file by just importing AutoComplete and then adding it to window.
0 comment threads
1 comment thread