VS Code IntelliSense를 사용한 바닐라 JavaScript의 인터페이스

TL;DR;

VS Code IntelliSense의 코드 분석 기능을 활용한 순수 JavaScript 인터페이스 시뮬레이션을 기술이라고 할 수 있습니다. 개체 팩토리와 빈 함수의 교묘한 조합을 통해 인터페이스와 유사한 코드 프롬프트 및 유형 검사를 구현하고 null 값 병합 연산자(??)를 사용하여 코드를 단순화합니다. 프로덕션 환경에서는 불필요한 인터페이스 코드를 제거하기 위해 빌드 스크립트를 사용해야 합니다.

다음은 VS Code IntelliSense와 같은 코드 편집기에서 코드 분석에 의존하는 순수 JavaScript 인터페이스의 예이므로 트릭이라고도 할 수 있습니다.

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);</code>

다음은 순수 JavaScript에서 속성 이름을 바꾸는 예입니다.

속성의 코드 분석을 초기화하는 개체 팩토리를 생성한 다음 개체를 null을 반환하는 함수로 대체합니다. 이를 통해 Null 병합 연산자(??)를 사용하여 코드를 깔끔하게 유지하는 몇 가지 선언 트릭을 사용할 수 있습니다.

배열에서도 작동합니다! 아래 퀴즈 #4 섹션의 샘플 코드를 참조하세요.

---

발견 과정

1. VS Code IntelliSense에서 createBox() 옵션의 속성을 묻는 메시지가 표시되기를 바랍니다.

---

2. 기본 매개변수를 사용해도 괜찮지만, 복잡함을 줄이기 위해 다른 곳에 두고 싶습니다.

---

3. 함수 외부에서 옵션을 선언하면 해당 값은 누구나 수정할 수 있으므로 오류가 발생합니다.

---

4. 그래서 객체 공장임이 틀림없습니다. 5번째 줄에서는 "인터페이스"와 함수 호출을 구별하기 위해 괄호 대신 백틱을 사용했습니다. 사실 이 글에서는 변수 이름에 InterfaceBoxOptions 같은 고유한 이름 접두사를 사용해야 합니다.

---

5. 이렇게 작동합니다. 하지만 옵션을 자체 변수로 선언하면 어떻게 될까요? 개체에 인터페이스 속성이 있음을 IntelliSense에 어떻게 알릴 수 있나요?

---

6. 아시다시피 개체에 인터페이스를 먼저 할당하면 IntelliSense가 인터페이스 속성을 가정합니다.

---

7. 놀랍게도 변수를 새 개체로 다시 할당한 후에도 여전히 작동합니다.

---

8. 그런데 한 줄이 더 있군요. 코드 한 줄이 아니면 받아들이지 않겠습니다! 하지만 그럴 수 있나요?

---

9. 답은 '예'입니다. null 병합(??) 연산자를 사용하세요. 이것이 내가 찾은 유일한 방법입니다. 하지만 인터페이스 대신 새 객체를 할당하려면 어떻게든 boxOptions가 null을 반환하도록 해야 합니다.

---

10. 다행스럽게도 또는 의도적으로 IntelliSense는 인터페이스의 초기 속성을 null을 반환하는 함수(5행)에 다시 할당한 후에도 계속해서 묻는 메시지를 표시합니다.

이제 순수 JavaScript로 작동하는 인터페이스와 같은 설정을 얻었습니다. 아마도 처음부터 TypeScript를 사용했어야 했지만 지금은 서부에 있습니다.

---

제작환경

개체 선언의 경우 interfaceName ??를 Terser에 전달하기 전에 빈 문자열로 바꾸는 빌드 스크립트를 작성했습니다. 압축기는 병합에서 반환된 null 값을 판단하지 않기 때문입니다.

이전:

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);</code>

이후:

<code class="language-javascript">let opt = InterfaceOptions`` ?? {
  name: null,
};</code>

인터페이스 부분을 삭제하지 않으면 압축된 코드는 다음과 같을 수 있습니다.

<code class="language-javascript">let opt = {
  name: null,
};</code>

---

퀴즈

1. 인터페이스에는 var

을 사용하세요.

인터페이스의 경우 var 또는 let 대신 const을 사용해야 합니다. 이렇게 하면 Terser를 사용하여 최상위 수준에서 압축할 때 제거됩니다.

<code class="language-javascript">let opt = (() => null)() ?? {
  name: null,
};</code>

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: null,
});
InterfaceOptions = interface;</code>

더 심각한 문제 #572: 할당만 되었지만 읽혀지지 않은 변수를 제거하세요.

---

2. 빈 인터페이스 대안

예를 들어 다른 사람을 위해 라이브러리를 작성하는 등 전역 인터페이스 기능을 사용할 수 없는 경우 다음을 수행할 수 있습니다.

<code class="language-javascript">// terser 选项
{
  toplevel: true,
  compress: true,
  // ...
}</code>

---

3. 인터페이스 내에서 인터페이스를 사용하세요

아직 알아내지 못했다면 방법은 다음과 같습니다.

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);</code>

나쁘지 않죠?

---

4. 배열에서도 작동하나요?

예. 하지만 IntelliSense가 제대로 작동하려면 어레이에 대한 별도의 인터페이스를 만들어야 합니다. 나는 그것이 꽤 혼란스럽다고 말하고 싶다.

예 1:

<code class="language-javascript">let opt = InterfaceOptions`` ?? {
  name: null,
};</code>

하지만 장점도 있습니다. 이제 배열에 무엇을 추가해야 할지 알았습니다!

예 2:

<code class="language-javascript">let opt = {
  name: null,
};</code>

---

5. 재귀적으로 작동할 수 있나요?

이런가요? 아니요, 이 특정 개체에 대한 코드 분석이 중단됩니다.

하지만 다음과 같이 할 수 있습니다.

<code class="language-javascript">let opt = (() => null)() ?? {
  name: null,
};</code>

모든 이미지는 원본 텍스트와 동일한 형식으로 보존되었으며 사용되었습니다. 이미지 URL은 직접 처리할 수 없기 때문에 원본 텍스트의 /uploads/... 경로를 그대로 유지했습니다. 이러한 경로가 사용자 환경에 맞는지 확인하세요.

위 내용은 VS Code IntelliSense를 사용한 바닐라 JavaScript의 인터페이스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!