typescript - basic module example not working

Question

typescript - basic module example not working

Update on Person.ts file:

export class Person {
  private _name: string;
    constructor(name: string) {
      this._name = name;
    }
    get name(): string {return this._name};
}

Recent changes in test.ts script:

import {Person} from "./Person";

let user = new Person("John");
document.getElementById("h1").innerHTML = user.name;

Updated tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "es5"
    ,"outDir" : "build"
  }
}

Error message displayed in Chrome's console:

Uncaught ReferenceError: exports is not defined
at test.js:2

typescript import module export

Answer 1

Answer №1

I found the solution to my problem thanks to this helpful response:

Begin by installing requireJs
```
npm install requirejs
```

Add requireJs to your HTML page

<h1 id="h1"></h1>
<script src="../node_modules/requirejs/require.js" data-main="test.js"></script>

Next, compile the code using the AMD module argument:
```
tsc -module amd
```

Answer 2

I found the solution to my problem thanks to this helpful response:

Begin by installing requireJs
```
npm install requirejs
```

Add requireJs to your HTML page

<h1 id="h1"></h1>
<script src="../node_modules/requirejs/require.js" data-main="test.js"></script>

Next, compile the code using the AMD module argument:
```
tsc -module amd
```

Answer 3

Answer №2

To ensure your app is compatible with browsers, it's essential to utilize tools like webpack.

> npm install webpack -g
> webpack build/test.js bundle.js

Make sure to include the following in your HTML:

<script src="/bundle.js"></script>

When compiling TypeScript code, consider that commonjs module resolution may cause issues in browsers (as it's primarily used by Node.js). Utilizing a bundler like webpack will help optimize your app for browser compatibility.

Answer 4

To ensure your app is compatible with browsers, it's essential to utilize tools like webpack.

> npm install webpack -g
> webpack build/test.js bundle.js

Make sure to include the following in your HTML:

<script src="/bundle.js"></script>

When compiling TypeScript code, consider that commonjs module resolution may cause issues in browsers (as it's primarily used by Node.js). Utilizing a bundler like webpack will help optimize your app for browser compatibility.

Answer 5

Answer №3

Displayed below is the transpiled code:

define(["require", "exports"], function (require, exports) {
    "use strict";
    
    Object.defineProperty(exports, "__esModule", { value: true });
    
    var Car = (function () {
        function Car(make) {
            this._make = make;
        }
        
       Object.defineProperty(Car.prototype, "make", {
           get: function () { return this._make; },
           enumerable: true,
           configurable: true
       });
       
       return Car;
    }());
    
    exports.Car = Car;
});

It should be noted that this code assumes that browsers support the module system, specifically requirejs in this case. You can easily use the provided snippet as it is written in valid ES5 code.

var Car = (function() {
    function Car(make) {
        this._make = make;
    }
    
    Object.defineProperty(Car.prototype, "make", {
        get: function() {
            return this._make;
        },
         enumerable: true,
         configurable: true
     });;
     
     return Car;
 }());

Answer 6

Displayed below is the transpiled code:

define(["require", "exports"], function (require, exports) {
    "use strict";
    
    Object.defineProperty(exports, "__esModule", { value: true });
    
    var Car = (function () {
        function Car(make) {
            this._make = make;
        }
        
       Object.defineProperty(Car.prototype, "make", {
           get: function () { return this._make; },
           enumerable: true,
           configurable: true
       });
       
       return Car;
    }());
    
    exports.Car = Car;
});

It should be noted that this code assumes that browsers support the module system, specifically requirejs in this case. You can easily use the provided snippet as it is written in valid ES5 code.

var Car = (function() {
    function Car(make) {
        this._make = make;
    }
    
    Object.defineProperty(Car.prototype, "make", {
        get: function() {
            return this._make;
        },
         enumerable: true,
         configurable: true
     });;
     
     return Car;
 }());

typescript - basic module example not working

Answer №1

Answer №2

Answer №3

Similar questions

Having difficulty converting a list of intricate objects into a CSV format

The TypeScript error states that the argument type 'string | undefined' cannot be assigned to the parameter type 'string'

When trying to access a string value for an ID, I encountered an error stating "Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)"

How can you efficiently refresh cached data for multiple related queries after a single mutation in react-query?

What are the steps to set up a dictionary with predetermined values?

Save the entire compiler output as a text or CSV file by using the "strict":true compiler option in TypeScript

JavaScript: Share module contents internally through exporting

Creating a nrwl/nx workspace with Angular Universal and encountering a typing problem in Cypress configuration

Template literal types in TypeScript and Visual Studio Code: An unbeatable duo

Converting a Union to Intersection in Typescript

When attempting to retrieve the first element of an array using TypeScript, the browser unfortunately returned an error stating that the property was undefined

Numerous documents within a JavaScript application

Encountering a Typescript issue while trying to access two distinct values dynamically from within a single object

When the value is empty, MUI Autocomplete will highlight all items

Implementing asynchronous validation in Angular 2

Resolving problem in React component: TypeScript error - Unable to find property 'type' on 'string' type

When it comes to Typescript interfaces, subsequent fields are not overloaded or merged

typescript class with a union type

exclude a few countries from ngx-intl-tel-input

How to retrieve the HTTPClient value in Angular?