Making a typescript function available to window namespace

Question

I am currently getting into typescript and webpack, but right now I am lost on how to solve this problem:

I want to call a function inside my typescript class when a form is being submitted. There is no magic involved just yet, but I just can't figure out how to make the functionality accessible to my form, I am constantly facing the problem that the function is not defined, so something must be missing to make it available to the window namespace.

This is my .ts file:

class Login {

    loginAccount() {
        console.log("test");
        debugger;
    }
};

export const login = new Login();

as you can see, no magic in here. I'm just trying to get the call done as of now.

This file is imported in my webpack like this (inside my index.ts):

import './Login/login.ts';

The form in my html file looks like this:

<form onsubmit="login.LoginAccount(); return false;">
    Email: <input type="text" name="email"><br>
    Password: <input type="text" name="password"><br>
    <input type="submit" name="Submit" value="Submit"/>
</form>

I just can't get this to work. I am sure that the solution is fairly simple, but after 30 minutes of googling this I mostly found solutions which deal with this in a jackhammer way.

Right, I mistyped that one. Does not help, though, as login itself is not available — Sossenbinder
– Sossenbinder, Commented Apr 28, 2018 at 13:07

eldarg · Accepted Answer · 2018-04-28 13:15:44Z

1

Webpack doesn't make all exports available from the window namespace. You can do it explicitly in your code.

class Login {
  loginAccount() {
    console.log("test");
    debugger;
  }
};
const login = new Login();
// as it's typescript you'd probably need (window as any).login = login 
window.login = login 
export { login };

answered Apr 28, 2018 at 13:15

eldarg

3182 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sossenbinder Over a year ago

Sadly that does not help :( I added the code you mentioned in my login.ts, but I still can't access the object

eldarg Over a year ago

Is the bundle included in the html?

Sossenbinder Over a year ago

Yes, it is. Other functionality I included in my index.ts already works flawlessly

Sossenbinder Over a year ago

I changed (window as any) to (<any>window) and it works now!

Collectives™ on Stack Overflow

Making a typescript function available to window namespace

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related