TL;DR;

VS Code IntelliSense のコード分析機能を使用した、純粋な JavaScript インターフェイスのシミュレーションはスキルと言えます。オブジェクト ファクトリと空の関數(shù)を巧みに組み合わせることで、インターフェイスのようなコード プロンプトと型チェックが実裝され、コードを簡素化するために null 値結(jié)合演算子 (??) が使用されます。運用環(huán)境では、ビルド スクリプトを使用して不要なインターフェイス コードを削除する必要があります。

以下は、VS Code IntelliSense などのコード エディターでのコード分析に依存する純粋な JavaScript インターフェイスの例であるため、トリックとも言えます。

var interface = () => null;

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

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

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

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

createItem(opt);

純粋な JavaScript でプロパティの名前を変更する例を次に示します。

プロパティのコード分析を初期化し、オブジェクトを null を返す関數(shù)に置き換えるオブジェクト ファクトリを作成します。これにより、null 合體演算子 (??) を使用したいくつかの宣言トリックが可能になり、コードを整然とした狀態(tài)に保つことができます。

配列でも動作します!以下の 豆知識 #4 セクションのサンプル コードを參照してください。

発見プロセス

1. VS Code IntelliSense が createBox() オプションのプロパティの入力を要求することを願っています。

2. デフォルトのパラメータを使用しても機能しますが、亂雑さを減らすために別の場所に置きたいと思います。

3. 関數(shù)の外でオプションを宣言すると、その値は誰でも変更できるため、エラーが生成されます。

4. つまり、それはオブジェクト ファクトリに違いありません。 5 行目では、「インターフェイス」と関數(shù)呼び出しを區(qū)別するために、括弧の代わりにバッククォートを使用しています。実際、この記事では、変數(shù)名には InterfaceBoxOptions などの一意の名前プレフィックスを使用するだけで済みます。

5. これは機能しますが、オプションを獨自の変數(shù)として宣言したらどうなるでしょうか?オブジェクトにインターフェイスのプロパティがあることを IntelliSense に伝えるにはどうすればよいですか?

6. ご存知のとおり、最初にインターフェイスをオブジェクトに割り當てると、IntelliSense はインターフェイス プロパティを想定します。

7. 驚いたことに、変數(shù)に新しいオブジェクトを再代入した後でも機能します。

8. しかし、それはあと 1 行です。コード行でない限り、受け入れません。しかし、それはできるでしょうか？

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

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

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

本番環(huán)境

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

前:

var interface = () => null;

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

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

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

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

createItem(opt);

の後:

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

インターフェース部分を削除しないと、圧縮されたコードは次のようになります:

let opt = {
  name: null,
};

トリビア

1. インターフェースには var

インターフェイスの場合は、var または let の代わりに const を使用する必要があります。これにより、Terser を使用して最上位で圧縮するときに確実に削除されます。

let opt = (() => null)() ?? {
  name: null,
};

var interface = () => null;

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

簡潔な問題 #572: 割り當てられるだけで決して読み取られない変數(shù)を削除します。

2. 空のインターフェースの代替

グローバル インターフェイス関數(shù)が利用できない場合、たとえば他の人のためにライブラリを作成している場合は、次のようにすることができます:

// terser 選項
{
  toplevel: true,
  compress: true,
  // ...
}

3. インターフェース內(nèi)でインターフェースを使用する

まだ理解していない場合は、次のようにしてください:

var interface = () => null;

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

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

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

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

createItem(opt);

悪くないですよね？

4. 配列は使用できますか?

はい、ただし、IntelliSense が適切に動作するには、アレイ用に別のインターフェイスを作成する必要があります。かなり混亂していると言えます。

例 1:

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

しかし、メリットもあります。これで、配列に何を追加するかがわかりました。

例 2:

let opt = {
  name: null,
};

5. 再帰的に動作できますか?

これが好きですか？いいえ、この特定のオブジェクトのコード分析は中斷されます。

しかし、次のようにすることもできます:

let opt = (() => null)() ?? {
  name: null,
};

すべての畫像は保存され、元のテキストと同じ形式が使用されています。 畫像の URL は直接処理できないため、元のテキストの /uploads/... パスを保持しました。 これらのパスが環(huán)境に対して正しいことを確認してください。

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