[TS] Support Optional Properties in ObservableMixin (here: SingleBindChain)

[mmichaelis]

📝 Provide a description of the improvement

While developing our own plugins for CKEditor 5, we would prefer the ObservableMixin (here: SingleBindChain) to support binding from/to optional values as well.

Reproducer

The following will report an error in LinkUI if we define the command value (here LinkCommand, also requires change in Command) to be optional:

ckeditor5/packages/ckeditor5-link/src/linkui.ts

Line 142 in f4d2045

actionsView.bind( 'href' ).to( linkCommand, 'value' );

To reproduce, just change these definitions to optional rather than enforcing either a value or undefined:

ckeditor5/packages/ckeditor5-link/src/linkcommand.ts

Line 29 in f4d2045

declare public value: string | undefined;

and

ckeditor5/packages/ckeditor5-core/src/command.ts

Line 52 in f4d2045

declare public value: unknown;

Thus, for the given lines:

// linkcommand.ts
declare public value?: string;
// command.ts
declare public value?: unknown; 

(side note: As not all commands require having a value, optional might even be the better choice here)

Suggestion

The suggestion is changing, for example (related to the example above):

ckeditor5/packages/ckeditor5-utils/src/observablemixin.ts

Lines 1277 to 1280 in f4d2045

	to<O extends Observable & { [ P in K ]: TVal }, K extends keyof O>(
	observable: O,
	key: K
	): void;

to:

to<O extends Observable & { [ P in K ]?: TVal }, K extends keyof O>(
	observable: O,
	key: K
): void;

Most likely, other declaration should be adapted, too.

Workaround

Despite using @ts-expect-error (in favor of @ts-ignore), you have to define your bound properties as not being optional but either requiring a value or undefined just as it is done for LinkCommand.

As an alternative to this, redefine the given method via Module Augmentation, as also used in augmentation.ts:

declare module "@ckeditor/ckeditor5-utils" {
  interface SingleBindChain<TKey extends string, TVal> {
    to<O extends Observable & { [ P in K ]?: TVal }, K extends keyof O>(
      observable: O,
      key: K
    ): void
  }
}

This, seems to require splitting up bind and to, though, to (using the LinkUI example from above):

const bindChain = actionsView.bind( 'href' );
bindChain.to( linkCommand, 'value' );

📃 Other details

• Browser: Chrome
• OS: Windows
• CKEditor version: 37.0.1
• Installed CKEditor plugins: not relevant

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Witoso]

Thanks for the feedback, we will take a look at this.