タイプスクリプトのサポート差別された組合。Rxjsで同じ概念を
filter
に拡張する方法オペレーター 以下の例では?
interface Square {
kind: 'square';
width: number;
}
interface Circle {
kind: 'circle';
radius: number;
}
interface Center {
kind: 'center';
}
type Shape = Square | Circle | Center;
const obs$: Observable<Shape> = of<Shape>({ kind: 'square', width: 10 });
// Expected type: Observable<Square>
// Actual type: Observable<Shape>
const newObs$ = obs$.pipe(
filter((x) => x.kind === 'square')
);
上記のコードスニペットでは、newObs $のタイプを次のように推測したいと考えています:
Observable<Square>
。しかし、どうやら、
TypeScript
それはしません。
これを達成する方法は? TypeScript型推論の制限に達しましたか?
Redux + Redux-Observable
で非常に役立つように見えるので、私はこれを探しますコードベース。
回答 2 件
これは、TypeScript型システムの制限ではなく、
filter
の実装の制限です。 。flatMap
を使用して目的の動作を簡単に達成できます。 :// Inferred type: Observable<Square> const newObs$ = obs$.pipe( flatMap((x) => x.kind === "square" ? of(x) : empty()) );
関連記事
- TypeScriptでユニオン型を防ぐ方法はありますか?
- TypeScript:可変個引数タプルタイプからデータ型を推測する
- Typescript:ユニオンまたは配列からオブジェクトタイプを派生させる
- Typescriptで配列をフィルター処理する
- オブジェクトの配列によるオブジェクトの配列のフィルター[TypeScript] [ES6]
- typescriptのオブジェクト内のオブジェクトの配列をフィルタリングします
- TypeScriptで共用体型を部分型にブレンドする方法は?
- TypeScriptで別のオブジェクト配列のオブジェクト配列をフィルタリングするにはどうすればよいですか?
- Typescript宣言タイプをインラインで使用する
関連した質問
- タイプ 'string'のパラメーターを持つインデックス署名がタイプDataTypeで見つかりませんでした
- 複数の型と型付き配列を使用したVuejsプロップ検証
- 既存のインターフェースを使用してインターフェースを拡張する
- Angularの別のコンポーネントからモーダルダイアログを呼び出す適切な方法は?
- ループバック4でrequestBodyを作成するためのベストプラクティスは何ですか?
- Typescriptはtry/catchからの戻り値を認識しません
- フィルタ選択の更新されたカウントを取得するにはどうすればよいですか?
- React:アクションはプレーンオブジェクトでなければなりません
- 二重引用符を使用したAngularAPI呼び出し
- プロパティ「user」はタイプ「Session&Partial 」に存在しません
実際には、TypeScriptタイプガードを使用してこれを行うことができます。 http://www.typescriptlang.org/docs/handbook/advanced-types.htmlのセクション「タイプガードとタイプの区別」を参照してください。
ここで重要なのは
function isWhatever(x: any): x is Whatever => ...
です 構文。これは基本的に、
isWhatever
関数はtrue
を返します その後、それはx
を保証しますWhatever
のものです タイプ。あなたの例では、TypeScriptは3つのクラスすべてを考慮します。
したがって、
filter()
の述語関数を定義できます このように:これで、
Square
のみが適切に考慮されます。 クラス:ライブデモをご覧ください:https://stackblitz.com/edit/rxjs6-demo-z9lwxe?file=index.ts
よく似た質問:https://github.com/ReactiveX/rxjs/issues/2340