Post History

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:

```json
{
    "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:

```js
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 `export`ing 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.