Does useDefineForClassFields *have* to be true?

[justinfagnani]

On the Lit project we have users using both Lit and MobX (often via lit-mobx). If they follow the configuration guide for TypeScript or instructions for upgrading to MobX 6 they will be told to set useDefineForClassFields to true, which will break Lit decorators.

But does useDefineForClassFields really need to be set to true? What breaks in MobX is fields are initialized with set semantics? Most of the time (without a setter on the prototype) the result will be the same: an instance property.

[kubk]

Consider this example:

class Store {
  propertyA: null | string = null;
  propertyB?: string;
  
  constructor() {
    makeAutoObservable(this);
  }
}

Unless you set useDefineForClassFields to true only propertyA will be picked up by makeAutoObservable. It means that propertyB won't become observable. To fix it you should either set useDefineForClassFields to true or provide a default value to propertyB: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier

While it might work for you, TS is going to make useDefineForClassFields enabled by default: https://www.typescriptlang.org/tsconfig#useDefineForClassFields

[StephenHaney]

Trying to use Lit for the first time and running into the exact problem described in kubk's comment. (Edit to remove incorrect bit about MobX decorators).

If you want to use reactive properties, seems the best thing to do is set useDefinedClassFields to false and make sure to always assign an initial value to MobX fields (no implicitly undefined properties).

I'm curious @justinfagnani is the plan to eventually switch to defineProperty for Lit? Or is that incompatible with how Lit properties work?

Edit: another workaround for future seachers: if you never use Lit "reactive properties" at all, because MobX + MobxLitElement is providing the reactivity for you, you can set useDefineClassFields to true and use unassigned class fields. Not sure if this has any other side effects for Lit, but so far so good.

[urugator]

I will just add that we do support good old syntax without class fields:

constructor() {
  this.a = "";
  makeAutoObservable(this);
}

So as long as it actually translates to assigment, it will work.
You may also experience some differences with subclassing - with define semantics, it's not possible to re-declare the field in subclass as we make it non-configurable.

[imWildCat]

Thanks for the answer!