Typescript: Getting error TS2339: Property does not exist on type for a valid ES6 class

[mohitspawar]

I have the following ES6 class

class MyClass {
    constructor(){
        this.myclassvar = 'abc';
    }
}

When compiled/transpiled through TypeScript it generates error TS2339: Property 'myclassvar' does not exist on type 'MyClass'.

If the above code snippet is valid ES6 then TypeScript should not generate the error. The generated javascript it valid. It's just that the error scares the developers trying to use ES6 without typings.

The same ES6 class transpiles properly in BabelJS.

I know I can fix the error by declaring the variable.

class MyClass {
    myclassvar;
    constructor(){
        this.myclassvar = 'abc';
    }
}

Since TypeScript is a superset of Javascript, it should be able to handle valid ES6 without errors.

My compiler settings are

"compilerOptions": {
        "target": "es5",
        "module": "amd",
        "declaration": true,
        "noImplicitAny": false,
        "noResolve": true,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    }

[WreckedAvent]

tsc should still compile this, so it can technically handle the ES6. (Most) errors in typescript do not actually stop code being transformed and emitted.

[mohitspawar]

Yes. As I mentioned the generated JS is a valid JS file. The issue here is developer experience. The error shows up in IDEs and also in the build output through GruntJS/GulpJS.

This error breaks the notion of TypeScript being a superset of Javascript and any valid JS is a valid TS.

[RyanCavanaugh]

Duplicate #766

[mrnagydavid]

Can it surely be a duplicate of the ticket called "Allow declaring class members within a constructor"?

It is my understanding that in ES6, we do not declare data properties of classes. The problem introduced here (and causing troubles as early as step 2 in angular2 tutorial) is that for some reason TS requires data property declaration meanwhile stating it is a superset of ES6.

[iignatov]

@RyanCavanaugh any chance of reopening this issue?

I agree with @mrnagydavid that this issue is not the same as #766 which proposes different methods for declaring class members within a constructor while the current one is about making a valid JavaScript code to work in a TypeScript project without generating any errors.

The idea is to solve the problem of _'my ES6 code is an error in TypeScript'_ mentioned by @danquirk here: https://github.com/Microsoft/TypeScript/issues/766#issuecomment-90204645 without introducing new syntax but instead:

inferring from this.foo assignments in the constructor to implicitly infer the shape of your type

[cebor]

The Typescript Specification describes Typescript as superset of ECMAScript 2015 (ES2015) which supports all ES2015 features.

Quote: "Every JavaScript program is also a TypeScript program."

So it should definitely not error on valid JS-Code.

Link: https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#1-introduction

[RyanCavanaugh]

Also discussed at #2393 and #2606 and a bunch of other places.

[RyanCavanaugh]

Quote: "Every JavaScript program is also a TypeScript program."

This is true of _syntax_ and _runtime semantics_, but it is obviously not that TypeScript cannot add semantic errors. By your argument, we could not issue an error on things like [] * 42.

[RachelSatoyama]

I believe that this at least need be clarified in spec. When one reads "Every JavaScript program is also a TypeScript program" he/she can erroneously conclude that every program will run without any noticable additional effort which is not always the case.

[zeeshanjan82]

I am currently converting an ES6 project to typescript and in ES6 we can easily write this.name = 'xyz' but in the typescript this will throw error. How can we fix this error I have such errors a lot so cannot manually declare the variable everywhere.

[rostacik]

hi gents.
I was just passing by in a search for different TS problem but I made you a small sample what should work for you.
basically TS will generate you the same code that you did (is using the same JS pattern so object will have prob and behaves like class) :

http://www.typescriptlang.org/play/index.html#src=class%20MyClass%20%7B%0D%0A%09myclassvar%3A%20string%20%3D%20%22abcd%22%3B%0D%0A%7D%0D%0A%0D%0Avar%20a%20%3D%20new%20MyClass()%3B%0D%0Aalert(a.myclassvar)%3B

[rostacik]

or a bit different version here :

https://jsfiddle.net/amgLbk6s/

[quantuminformation]

Anyone managed to get Array.from to work?

http://stackoverflow.com/a/36719911/1339087

I'm still getting:

[mhegazy]

use --lib es6 or --lib es6,dom

[quantuminformation]

Thanks, I won't bother with that interface now thx

[gamliela]

This one is really annoying. Sometimes I want to have a class without cluttering it with type information.

Maybe adding something like "noImplicitAnyForClassMembers": false in tsconfig?