JavaScript Generated From TypeScript Encountering TypeError

Question

JavaScript Generated From TypeScript Encountering TypeError

Why is the JavaScript code produced by this TypeScript snippet causing a TypeError upon execution?

class Foo {
  public foo: {
    bar: number
  };

  constructor() {
    this.foo["bar"] = 123;
  }
}

new Foo();

Even though I'm compiling it with the --strict option and expecting errors for uninitialized variables, the code still generates an error.

C:\Users\Simon\test.js:4
        this.foo["bar"] = 123;
                        ^

TypeError: Cannot set property 'bar' of undefined
    at new Foo (C:\Users\Simon\test.js:4:25)
    at Object.<anonymous> (C:\Users\Simon\test.js:8:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)

The version of TypeScript being used in this case is 2.5.3.

javascript typescript undefined typeerror

Answer 1

Answer №1

My expertise lies more within the realm of JavaScript, so TypeScript is not my forte.

After experimenting on the playground, I found that your code compiles as shown below. It's worth noting that with `this.foo["bar"]`, TypeScript won't raise any issues if you use `this.foo["bar-the-third"]`, but I assume you intended to write `this.foo.bar`.

class Foo {
  public foo: {
    bar: number
  };

  constructor() {
    this.foo.bar = 123;
  }
}

new Foo();

Upon examining the output, it seems that TypeScript does not automatically generate the object; you would need to do that yourself. Essentially, TypeScript focuses on type-checking rather than autogenerating code. If you create the object, TypeScript will perform the necessary checks for you.

For instance,

public foo: {
  bar: number
} = {bar: 123};

//or

this.foo = {bar: 123};

Answer 2

My expertise lies more within the realm of JavaScript, so TypeScript is not my forte.

After experimenting on the playground, I found that your code compiles as shown below. It's worth noting that with `this.foo["bar"]`, TypeScript won't raise any issues if you use `this.foo["bar-the-third"]`, but I assume you intended to write `this.foo.bar`.

class Foo {
  public foo: {
    bar: number
  };

  constructor() {
    this.foo.bar = 123;
  }
}

new Foo();

Upon examining the output, it seems that TypeScript does not automatically generate the object; you would need to do that yourself. Essentially, TypeScript focuses on type-checking rather than autogenerating code. If you create the object, TypeScript will perform the necessary checks for you.

For instance,

public foo: {
  bar: number
} = {bar: 123};

//or

this.foo = {bar: 123};

Answer 3

Answer №2

To work around this issue, if foo has the potential to be undefined, you can define it as follows:

public foo: {
  bar: number
} | undefined;

By doing so, any errors will be caught at compile time (especially when using the --strictNullCheck option).

For more information on this matter, refer to the GitHub issue link provided by @Aleksey L.

Answer 4

To work around this issue, if foo has the potential to be undefined, you can define it as follows:

public foo: {
  bar: number
} | undefined;

By doing so, any errors will be caught at compile time (especially when using the --strictNullCheck option).

For more information on this matter, refer to the GitHub issue link provided by @Aleksey L.

Answer 5

Answer №3

Attempting to assign a value to the key bar on this.foo, but `this.foo` has not been initialized yet. To fix this, initialize it like so: this.foo = { bar: 123 };

Answer 6

Attempting to assign a value to the key bar on this.foo, but `this.foo` has not been initialized yet. To fix this, initialize it like so: this.foo = { bar: 123 };

JavaScript Generated From TypeScript Encountering TypeError

Answer №1

Answer №2

Answer №3

Similar questions

Ways to dynamically eliminate focus around text inputs

The error message "TypeError: Cannot set property 'href' of undefined" occurred at angular.js line 12520 when trying to set $window.location.href

Tips for displaying only the items that are currently visible in an AngularJS Dropdown

Uploading a screenshot to a server using Ionic 4

What are the potential downsides of using ID to access HTML elements in React TypeScript?

Dealing with numerous dynamically generated tables while incorporating sorting in Angular: a comprehensive guide

Typescript is unable to access the global variables of Node.js

How to tell if one mesh is contained within another in Three.js

Stop unauthorized pages from hijacking login cookies

Distributing your React component on npm

Can a universal type be designed for application across various types?

What is the best way to restrict the size of a table that is filled with data from a database?

unable to retrieve the chosen item from the dropdown menu

How do I dynamically incorporate Tinymce 4.x into a textarea?

What are the steps for integrating and expanding a JavaScript library using rollup, TypeScript, and Angular 2?

Tips on utilizing Ajax for updating the RenderBody() segment

Develop a web application in ASP.NET MVC 4 utilizing bundle configurations

What is causing express.js not to authenticate properly?

Angular2 scripts are failing to load in the web browser

Skip creating declarations for certain files