Vanilla JavaScript と VS Code IntelliSense のインターフェイス

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. しかし、それはあと 1 行です。コード行でない限り、受け入れません。しかし、それはできるでしょうか？

---

9. 答えは「はい」です。null 合体 (??) 演算子を使用します。これが私が見つけた唯一の方法です。ただし、インターフェイスの代わりに新しいオブジェクトを割り当てるには、何らかの方法で boxOptions が null を返すようにする必要があります。

---

10. 幸いなことに、あるいはおそらく仕様により、IntelliSense は、null を返す関数にインターフェイスの初期プロパティを再割り当てした後でも、インターフェイスの初期プロパティの入力を求めます (5 行目)。

これで、純粋な JavaScript で動作するインターフェイスのようなセットアップができました。最初から TypeScript を使うべきだったかもしれませんが、私は西部開拓時代にいます。

---

本番環境

オブジェクト宣言については、コンプレッサーはマージによって返された null 値を判断しないため、Terser に渡す前に interfaceName ?? を空の文字列に置き換えるビルド スクリプトを作成しました。

前:

<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/... パスを保持しました。 これらのパスが環境に対して正しいことを確認してください。

以上がVanilla JavaScript と VS Code IntelliSense のインターフェイスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。