Having trouble creating instances of a TypeScript class in JavaScript

Question

Having trouble creating instances of a TypeScript class in JavaScript

I apologize for the potentially problematic inquiry.

Issue:

Here is the TypeScript class definition:

1    class MyClass {
2        constructor() {
3            alert("MyClass instantiated!");
4        }
5    }
6    export = MyClass;

After compilation, it becomes JavaScript like this:

1    var MyClass = (function () {
2        function MyClass() {
3            var _this = this;
4            alert("MyClass instantiated!"); 
5        }
6    }
7    module.exports = MyClass

The class is referenced in a JSP page that contains this script:

<script language='javascript' src="myclass.js">
    var myclass = new MyClass();
</script>

Upon debugging, it's observed that the code reaches line 1 of the compiled JavaScript file but exits at line number 7.

Inquiry:

Why does the execution not enter the function and rather exits? Could there be an issue with how I'm instantiating it?

javascript class typescript instantiation

Answer 1

Answer №1

The issue arises from your export of TypeScript in a commonjs format (as shown by the presence of module.exports = MyClass at line 7). To resolve this, you must compile the TypeScript into a format compatible with the browser, such as UMD. Alternatively, you can simply delete export = MyClass; from the TypeScript source.

Here is an example of functional TS code:

class MyClass {
    constructor() {
        alert("MyClass has been instantiated!");
    }
}

Upon compilation, it will look like this:

var MyClass = (function () {
    function MyClass() {
        var _this = this;
        alert("MyClass instantiated!"); 
    }
}

To use it on a webpage, follow these steps:

<script type="text/javascript" src="myclass.js"></script>
<script>
    var myclass = new MyClass();
</script>

Answer 2

The issue arises from your export of TypeScript in a commonjs format (as shown by the presence of module.exports = MyClass at line 7). To resolve this, you must compile the TypeScript into a format compatible with the browser, such as UMD. Alternatively, you can simply delete export = MyClass; from the TypeScript source.

Here is an example of functional TS code:

class MyClass {
    constructor() {
        alert("MyClass has been instantiated!");
    }
}

Upon compilation, it will look like this:

var MyClass = (function () {
    function MyClass() {
        var _this = this;
        alert("MyClass instantiated!"); 
    }
}

To use it on a webpage, follow these steps:

<script type="text/javascript" src="myclass.js"></script>
<script>
    var myclass = new MyClass();
</script>

Answer 3

Answer №2

It is not possible to include context within a script tag that is fetching another file.

Here's an alternative approach:

<script src="myclass.js"></script>
<script>
    var myclass = new MyClass();
</script>

Answer 4

It is not possible to include context within a script tag that is fetching another file.

Here's an alternative approach:

<script src="myclass.js"></script>
<script>
    var myclass = new MyClass();
</script>

Having trouble creating instances of a TypeScript class in JavaScript

Answer №1

Answer №2

Similar questions

Triggering a 'RegisterStartupScript' call resulted in an 'Object expected' error

The inline style fails to take effect on input elements that are generated dynamically

Looping through elements using .each in jQuery and accessing their values in the following iteration

Validating American phone numbers using regular expressions

Updating the jQuery AJAX URL dynamically based on user input in a form submission

AngularJS: Display the last four characters of a string and substitute the rest with 'X'

What could be the reason for THREE.ColladaLoader causing a complete suspension of all operations on the website

Updating input value in Vue using JavaScript method

Exploring methods to iterate through individual models in an array within an Angular Component

When a timeout is triggered, the AngularJS Promise is not being cancelled

The presence of onChange?: (ValueType, ActionMeta) => void with OptionType is not compatible

Is there a way to set up one function that can be used across different HTML buttons?

How to deliver various static files in NestJS using different paths and prefixes?

A guide on inserting multiple values into a database table using PHP

Cosmic Plantation Matrix Classification Or Arrangement

How can the session user object be modified after logging in?

Steps for creating a file selection feature in Chonky.js

I'm trying to speed up my loop because it's currently running way too slow. Any suggestions

Ensuring the website retains the user's chosen theme upon reloading

What could be the reason for the electron defaultPath failing to open the specified directory?