TypeError in TypeScript Generated JavaScript

Question

Why does the JavaScript generated by the following TypeScript code generate a TypeError when executed?

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

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

new Foo();

I'm compiling the code with the --strict option so I'd expect the assignment to an uninitialised variable to get caught but it doesn't.

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)

I'm using TypeScript 2.5.3.

If you'd like to get an error at compilation time - it is not possible currently. Related issue — Aleksey L.
– Aleksey L., Commented Oct 3, 2017 at 10:20

Keith · Accepted Answer · 2017-10-03 11:13:18Z

1

I'm more of a Javascript purist, so no expert on TypeScript.

But I've just gone on to the playground, below is what your code compiles too. Also you have this.foo["bar"], and typescript wouldn't complain if you had this.foo["bar-the-third"], I'm assuming you wanted this.foo.bar.

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

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

new Foo();

From looking at the output, at no point does Typescript attempt to generate the object, it appears this would be left to you.. IOW: Typescript is just checking the type, not automatically generating the code for you. So from looking at this, that definition is just for checking type.

But if you do create the object, Typescript seem to do the check.

eg.

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

//or

this.foo = {bar: 123};

answered Oct 3, 2017 at 11:13

Keith

24.4k2 gold badges32 silver badges48 bronze badges

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

3 Comments

Simon Morgan Over a year ago

Yeah, I don't expect TypeScript to initialise the object for me but rather to not let me assign to an undefined variable. The reason why this bit me in my real-world project is because the value of some fields aren't known at compile time and the values of other fields are dependent on the others.

Keith Over a year ago

Yeah, I can see were your coming from. Might be tricky for the Dev's to catch this though, as it would need to know that foo hadn't be assigned somewhere else, eg. inheritance, another function, bind etc. Even getting TypeScript output and placing into a strict ESLint doesn't pick this up.

Simon Morgan Over a year ago

As others have pointed out the developers seem to be working on it so there's still hope. I'm sure the devs have a legitimate reason why it doesn't get caught but other statically typed languages seem to be able to catch this class of bug which is why it surprised me. My guess is the way the TypeScript type system works makes this problem more difficult to catch than e.g. a language like Java.

Paleo · Accepted Answer · 2017-10-03 13:03:11Z

1

As a workaround, if foo can be undefined, you could declare that:

public foo: {
  bar: number
} | undefined;

... then an error will occur at compile time (with the option --strictNullCheck).

See also the link to the GitHub issue shared by @Aleksey L.

answered Oct 3, 2017 at 13:03

Paleo

24k5 gold badges74 silver badges84 bronze badges

Comments

Andrzej Smyk · Accepted Answer · 2017-10-03 10:21:37Z

0

You are trying to set value to key bar on this.foo which is not initialised yet. Initialize it lie this this.foo = { bar: 123};

answered Oct 3, 2017 at 10:21

Andrzej Smyk

1,72411 silver badges21 bronze badges

2 Comments

Simon Morgan Over a year ago

I know. I'm asking why TypeScript doesn't catch this very basic error when I'm compiling my code with all the strict options enabled.

Andrzej Smyk Over a year ago

Sorry, I just noticed you clearly mentioned this in your question.

Collectives™ on Stack Overflow

TypeError in TypeScript Generated JavaScript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related