자바스크립트와 인텔리센스

다음 코드를 고려하십시오.

 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     
      };
   }

유체 프로그래밍 스타일

내가 이것을하고 싶다면 :

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

Intellisense는 위와 같이 도움이 되지 않습니다.

논의
몇 년 전 계약을 맺으면서 이 프로그래밍 스타일을 처음 접했습니다. 100% 자바스크립트 프로젝트였습니다. 이 스타일은 호출자에게 내부 함수에 대한 액세스를 제공하는 반환 문으로 Object를 사용합니다. 또한 '내부' 기능을 정의하고 미리 정의된 방식으로 실행합니다. 코드를 그룹화하고 순서대로 실행하며 '내부' 기능에 대한 액세스를 제공하는 좋은 방법입니다.

Javascript에서 내부 기능을 노출하는 방법은 이 코드입니다.

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

문제는 다음과 같이 main 함수를 반환하는 각 메서드가 있다는 것입니다.

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

...강압을 사용하여 메서드 이름 유형을 '임의' 유형으로 변환합니다. 이것은 any 유형에 잘 정의된 키/값 쌍이 없기 때문에 응집력이 인텔리센스를 방해하는 곳입니다. 즉, 유동적인 스타일을 만들려는 시도가 작동하지 않습니다.

대신 메서드 호출을 연결하지 않고 각 키/값 쌍의 단일 수준 깊이를 허용합니다. 따라서 함수 호출을 연결하려면 개발자가 이름을 추측해야 하거나 더 나쁘게는 스크롤하여 찾아야 합니다. 대규모 프로젝트의 경우 이것은 유지될 수 없으며 스크롤 핑거 수근관 증후군을 일으킵니다.

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

이는 모든 Javascript 기반 인텔리센스가 얕은 텍스트 기반 API 검색을 기반으로 함을 의미합니다. 이것이 Javascript를 사용할 때 사용자가 Intellisense가 제공하지 않는 이름을 찾는 스크롤 마이스터가 되는 이유입니다. 깊이 들어가서 당신은 건배입니다.

나는 Intellisense가 POJS(Plain Old JavaScript)에서 작동한다고 계속해서 Typescript를 싫어하는 사람들이 주장하는 것을 들었습니다. 그것은 사실이 아닙니다!

JWP2020 자바스크립트 및 Intellisense