異なる型で `Array.prototype.includes()` を使用すると TypeScript がエラーをスローするのはなぜですか?

Array.prototype.includes() が配列要素に一致する型を必要とする理由

Array.prototype.includes() メソッドの目的は次のとおりです。配列に特定の要素が含まれている場合。正確で信頼性の高い結果を保証するには、searchElement パラメーターが配列要素の型と一致する必要があります。この型安全性により、誤った比較が防止され、配列のデータ整合性が維持されます。

次のコード スニペットを考えてみましょう。

<code class="js">type AllowedChars = 'x' | 'y' | 'z';
const exampleArr: AllowedChars[] = ['x', 'y', 'z'];

function checkKey(e: KeyboardEvent) { 
    if (exampleArr.includes(e.key)) { 
        // ...
    } 
}</code>

TypeScript コンパイラは、e.key がエラーであることを示します。パラメーターが exampleArr 要素のAllowedChars タイプと一致しません。このエラーは、includes() メソッドが searchElement が配列要素と同じ型であると想定しているためです。

Array.prototype.includes() は代入ではなくブール値を返すため、矛盾しているように見えるかもしれません。エラーが示唆しています。ただし、ここでは typescript の型システムが重要な役割を果たします。

配列に要素を含めることは、要素の型が配列の要素と一致していることを意味します。ただし、ここに示した例では、e.key パラメータの型は string ですが、exampleArr 要素はAllowedChars 型です。この不一致には、TypeScript 型システムの期待をオーバーライドするための型アサーションまたは型の拡張が必要です。

この問題を解決する最も簡単で最も推奨されるアプローチは、exampleArr の型を string[] のより広い型に拡張することです。または、許可された文字のみを含むように searchElement パラメータを絞り込みます。これらの変更により型の互換性が確保され、型に関連する潜在的なエラーや不一致が防止されます。

以上が異なる型で `Array.prototype.includes()` を使用すると TypeScript がエラーをスローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。