TypeScriptコンパイラにArray.prototype.filterが配列から特定の型を削除するように伝える方法は?
2023-08-05 05:33:05
質問
Array.prototype.filterを使用して配列からNULL(未定義)要素をフィルタリングしようとしていますが、TypeScriptコンパイラは"filter"関数の派生配列を認識しないようで、型チェックに失敗しています。
以下の単純化したコードを仮定すると、(number|undefined)[]型の配列があり、number[]配列に適合するようにundefinedをフィルタリングしたい場合です。
const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = arry
.map((i) => {
return typeof i === "number" ? i : void 0;
})
.filter((i) => i);
エラーによると
タイプ '(number | undefined)[]' はタイプ 'number[]' に割り当てられません。 タイプ 'number | undefined' はタイプ 'number' に割り当てられません。 タイプ 'undefined' はタイプ 'number' に割り当てられません。
filter関数がundefinedを除去することを知っている私は、以下のように結果の配列をnumber[]にキャストすることができます。
const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = (arry
.map((i) => {
return typeof i === "number" ? i : void 0;
})
.filter((i) => i) as Number[]);
キャスト以外の良い方法はないでしょうか?
環境は TSC2.1、strictNullChecksを有効にしています。
どのように解決するのですか?
TypeScriptのUser-Defined Type Guards機能を利用する。
const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = arry
.filter((i): i is number => {
return typeof i === "number";
});
// numArry = [1, 2, 3, 4, 6]
を見てみましょう。
i is number
を見てください。
このトリックにより、Array.filterの結果の型をキャストすることができます。
関連
-
[解決済み】TypeScriptで複数の型を持つ配列を定義する
-
[解決済み] TypeScriptでObject.keysがkeyof型を返さないのはなぜですか?
-
[解決済み] Angular 2 カスタムフォーム入力
-
[解決済み] TSにおける文字列列列挙型と文字列リテラル型の相違点
-
[解決済み] TypeScriptのInterfacesでgetter/setterを使用することは可能ですか?重複
-
[解決済み] 型{ [key: string]: boolean; }は何を意味するのでしょうか?
-
[解決済み] TypeScriptで純粋な抽象クラスを拡張する場合と実装する場合
-
[解決済み] TypeScriptでEnumを比較する方法
-
Typescriptでオブジェクトのキーと値の両方から型を取る
-
String Prototypeを拡張し、Typescriptで使用するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] TypeScriptの予約語 "type "とは何ですか?
-
[解決済み] Angular 2でアプリ起動時にサービスを実行する方法
-
[解決済み] TypeScriptでObject.keysがkeyof型を返さないのはなぜですか?
-
[解決済み] typescriptでmoment.jsをインポートするには?
-
[解決済み] Typescript で Enum を制限付きキータイプとして使用する
-
[解決済み] 他のプロパティを使用できる TypeScript インターフェース
-
[解決済み] Angular 2 カスタムフォーム入力
-
[解決済み] ESLint - TypeScriptの "no-unused-vars "を設定する。
-
[解決済み] jsdomとtypescriptで「プロパティ '...' がタイプ 'Global' に存在しない」を防ぐには?
-
[解決済み] VSCodeでTypeScriptの警告を無効にするには?