Notifications
Sign Up Sign In
Q&A

Access TypeScript class outside bundled code

+1
−0

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?

  1. 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.

Why should this post be closed?

3 comments

Migrating to https://meta.codidact.com ‭Mithical‭ 25 days ago

I think my biggest question here is why are you using it outside a bundle anyway? I would suggest either use bundled code or don't, you shouldn't be doing both in the same project ‭staticvoid‭ 22 days ago

@staticvoid the UI framework is kinda independent from the Q&A software. Code provided with it should be runnable in a totally different context. The Q&A code treats it like any 3rd-party code. It's similiar to how you would use Bootstrap JavaScript for your project. ‭luap42‭ 22 days ago

1 answer

+2
−0

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 comments

Sign up to answer this question »