Скачать или смотреть Solving the Typescript Property Ignorance in MobX Decorated Classes

Discover how to resolve Typescript errors related to `MobX` properties on class type definitions and enhance your TypeScript understanding.
---
This video is based on the question https://stackoverflow.com/q/64360309/ asked by the user 'kevzettler' ( https://stackoverflow.com/u/93212/ ) and on the answer https://stackoverflow.com/a/64368704/ provided by the user 'Danila' ( https://stackoverflow.com/u/5650447/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Typescript ignores decorated mobx properties on class type definition

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Overcoming TypeScript Property Ignorance in MobX Decorated Classes

When working with TypeScript, decorators, and MobX, you might encounter frustrating issues such as properties that seem to vanish from your class definitions. If you've faced the error where TypeScript pretends not to recognize your MobX decorated properties within class type definitions, you’re not alone. This guide will provide clarity on the problem and offer a straightforward solution.

Understanding the Problem

You may define a class in TypeScript with MobX decorators, like so:

[[See Video to Reveal this Text or Code Snippet]]

However, when you attempt to use this class elsewhere in your code, you might face errors indicating that the properties currentAnimation and interpolatedJoints do not exist on your type definition. For instance:

[[See Video to Reveal this Text or Code Snippet]]

The Errors

The errors might look like this:

[[See Video to Reveal this Text or Code Snippet]]

These messages indicate that TypeScript is attempting to interpret the properties as if they belong to the class constructor rather than the instances of the class. This confusion arises because of the use of the typeof operator.

What's Going Wrong?

The typeof operator is used to derive the type of a class itself (i.e., the constructor), rather than the type of its instance. In your case, you are trying to create an array of instances, not an array of class constructors. This is where TypeScript gets lost.

The Solution

To fix this issue, you simply need to declare the type of your controllers array as follows:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Fix

By removing typeof, you direct TypeScript to recognize that controllers is an array of instances of the AnimationController, not the class definition itself.

Each instance of AnimationController will correctly have access to the decorated properties like currentAnimation and interpolatedJoints.

When to Use typeof

typeof is valuable when you need to reference the constructor of a class, as shown in this example:

[[See Video to Reveal this Text or Code Snippet]]

In this example, typeof Foo allows createClass to accept the constructor of Foo and instantiate it later, unlike your case where you need the class instances.

Final Thoughts

The interplay between TypeScript and decorators in MobX can be tricky. However, understanding the distinction between class constructors and class instances is the key to resolving many common issues. By correctly defining your types without typeof, you ensure that TypeScript understands the structure of your data. With this knowledge, you're now equipped to tackle similar issues in your own code.

If you have any more questions or run into similar problems, feel free to leave a comment below!