1

Might be doing this wrong as I am new to typescript, but I have created a module, which I think from watching tutorials all day, let's me create what in C# would be a class, and I've done so like this:

export default class MyClass {

}

Now, it's my understanding that to create a new instance of this class, in typescript, I would do this:

import t from './MyClass';
var something = new t();

However, in my case my file is a js file, not a ts file, because I need to do it on the bottom of a html page.

However I can't figure out how, as doing new Myclass() gives me a not defined error.

I am struggling with the concept of import and export despite watching several tutorials so I could be doing things wrong, but I just want to create a clean project and it has lead mt to believe this is the way to do that.

I should also add that I had to add my module like this:

<script type="module" src="~/Scripts/Proj/MyClass.js"></script>

I have never used type="module" before, it just didn't work without it and I found it on a random SO post.

Any advice?

NibblyPig
  • 46,891
  • 62
  • 180
  • 311

1 Answers1

1

I'm not aware of any way for a global script to access a module. Instead, you'll need to write a module that copies all the things you want to use in global scripts into global variables (i.e., properties of the window). You can do this directly in MyClass.ts if you like (which I'll do for simplicity) or in a separate module.

A second issue is that modules are always deferred, so in order for your global script to run after the module, you'll need to defer your global script using one of the techniques from this question.

Working example:

index.html:

<html>
<body>
<script type="module" src="./MyClass.js"></script>
<script defer src="global.js"></script>
</body>
</html>

MyClass.ts:

export default class MyClass {

}
(<any>window).MyClass = MyClass;

global.js:

console.log(new MyClass());

Example with simple global TypeScript script

MyClass.ts:

class MyClass {}

index.html:

<html>
<body>
<script src="MyClass.js"></script>
<script>
console.log(new MyClass());
</script>
</body>
</html>

Example with TypeScript namespace

MyClass.ts:

namespace MyNamespace {
  export class MyClass {}
}

index.html:

<html>
<body>
<script src="MyClass.js"></script>
<script>
console.log(new MyNamespace.MyClass());
</script>
</body>
</html>
Matt McCutchen
  • 22,711
  • 1
  • 39
  • 54
  • This is way too complicated to just create a re-usable class in a TS file and use it in my code, without adding itself to the global namespace. There has to be something I'm doing wrong. I just want to do `new MyClass()` on my html page and use it. – NibblyPig Aug 15 '18 at 12:44
  • I get a 'define is not defined' error with the above code on this line `define(["require", "exports"], function (require, exports) {` – NibblyPig Aug 15 '18 at 12:56
  • If you want to load the TypeScript with ` – Matt McCutchen Aug 15 '18 at 14:19
  • Re "way too complicated": You can use TypeScript without using modules at all. Just remove the `export default` and your TypeScript file will be a global script that will define `MyClass` globally. – Matt McCutchen Aug 15 '18 at 14:20
  • Hmm, trying typescript to do things correctly, as much like C# as possible with nice classes and separate files etc. I tried a namespace instead of a module but still couldn't see my class. I tried adding it to the window object and still nothing. Not really sure what to do now, trying very hard to learn typescript but if I can't even get a simple thing like this to work after about 10 hours of trying different things over the past 2 days... I've done all of the pluralsight tutorials on it but there's just so little information about how it all hangs together :S – NibblyPig Aug 15 '18 at 14:41
  • OK, let's start really simple. Does the "Example with simple global TypeScript script" that I have just added work for you? – Matt McCutchen Aug 15 '18 at 15:18
  • Yep - that's pretty much what I started with when I first dabbled with typescript. But then I realised I didn't want it cluttering up the global namespace, so I read about modules and namespaces. Not 100% sure on when to use each one but I tried creating a module, and then had the above problems, so I tried creating a namespace, and still had the same problems. – NibblyPig Aug 15 '18 at 15:21
  • How about the above for a namespace? The example I gave of a module should also have worked if you set the `module` option to `es6` as I said, though it does require copying `MyClass` onto the window. – Matt McCutchen Aug 15 '18 at 15:27
  • Ahha, that worked, I had export namespace when I tried it, I removed export and it worked (kept it on the class though)! Thanks. Can't really tell if I should just write my application like this or if I should use modules really, I am not sure what the advantages are. None of the videos I watched really made it clear. Plus there is massive confusion over modules/namespaces sometimes being the same thing. – NibblyPig Aug 15 '18 at 15:41