Javascript and Intellisense

Consider this code:

 IntellisenseNotWorkingExample() {
      function setPerson() {
         this.person = new Person();
         this.person.firstName = "Joe";
         this.person.middleName = "";
         this.person.lastName = "Peterson";         
         return this.IntellisenseNotWorkingExample;
      }
      function initFormControls() {
         this.controls = {
            firstName: new FormControl(this.person.firstName, [
               Validators.required,
            ]),
            middleName: new FormControl(this.person.middleName),
            lastName: new FormControl(this.person.lastName, [
               Validators.required,
            ]),
            state: new FormControl("Texas", [Validators.required]),
         };
         return this.IntellisenseNotWorkingExample;
      }
      function initFormGroup() {
         this.formGroup = new FormGroup(this.controls);
         return this.IntellisenseNotWorkingExample;
      }
      setPerson();
      initFormControls();
      initFormGroup();
      return {
         setPerson: setPerson,
         setFormControls: initFormControls,
         setFormGroup:initFormGroup     
      };
   }

Fluid Programming Styles

If I wanted to do this:

// Caller Example
this.IntellisenseNotWorkingExample()
   // intellisense will find the first one
   .setPerson()
   // but not this one
   .setFormControls()
   // or this one
   .setFormGroup()

Intellisense is of no help as shown above.

Discussion
I first encountered this programming style working on a contract a few years back. It was a 100% Javascript project. This style uses an Object as a return statement giving the caller access to internal functions. It also defines 'internal' functions and it executes them in a predefined way. A nice way to group code, to execute it in order, and provide access to the 'internal' functions.

The way to expose internal functions in Javascript is this code.

return {
         setPerson: setPerson,
         setFormControls: initFormControls,
         setFormGroup:initFormGroup     
      };

The problem is that each method which returns the main function like this:

 function setPerson() {
         this.person = new Person();
         this.person.firstName = "Joe";
         this.person.middleName = "";
         this.person.lastName = "Peterson";         
         return this.IntellisenseNotWorkingExample;
      }

...uses coercion to convert the method name type to type of 'any'. This is where cohersion interrupts intellisense because a type of any has no well defined key/value pairs. This means that attempts to create a fluid style do not work.

What it allows instead is a single level depth of each key/value pair without chaining the method calls. So in order to chain the function calls the developer has to guess the names or worse yet, scroll to find them. For large projects this is untenable, it gives the scroll-finger carpal tunnel syndrome.

I say just give the finger to this problem but not the scrolling-finger.

This implies that all Javascript based intellisense is based on shallow text based api discovery. This is the reason when using Javascript the user becomes a scroll-meister looking for names which Intellisense doesn't provide. Go deep and you are toast.

I hear Typescript haters claiming over and over that intellisense just works in POJS (Plain Old JavaScript). It's not true!

JWP2020 Javascript and Intellisense