Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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

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

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

General comments (3 comments)

1 answer

+3
−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.

History
Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »