[解決済み] 他のプロパティを使用できる TypeScript インターフェース
2023-01-06 06:03:56
質問
要約すると、いくつかの基本的なプロパティを宣言し、追加のプロパティを制限しないインターフェイスを持つことは可能でしょうか?これは、私の現在の状況です。
私は フラックスパターン を使っています。
class Dispatcher<TPayload> {
dispatch(arg:TPayload):void { }
}
次に、このように独自のペイロード型を持つディスパッチャを作成します。
interface ActionPayload {
actionType: string
}
const dispatcher = new Dispatcher<ActionPayload>();
ここで、いくつかの追加データを含むペイロードをディスパッチするアクションコードがありますが
ActionPayload
インターフェースでは
actionType
. つまり、このコードです。
interface SomePayload extends ActionPayload {
someOtherData: any
}
class SomeActions {
doSomething():void {
dispatcher.dispatch({
actionType: "hello",
someOtherData: {}
})
}
}
コンパイルエラーになるのは
someOtherData
とは一致しないので
ActionPayload
インターフェースと一致しません。問題は、多くの異なる "action" クラスが同じディスパッチャを再利用することで、それが
someOtherData
であるのに対し、ここでは
anotherKindOfData
といった具合です。今のところ、これに対応するために私ができるのは
new Dispatcher<any>()
を使うしかないでしょう。なぜなら、異なるアクションがディスパッチされるからです。すべてのアクションは、ベースとなる
ActionPayload
のような型に制約をかけられるといいなと思いました。
new Dispatcher<extends ActionPayload>()
のような型拘束ができればと思っています。そのようなことは可能でしょうか?
どのように解決するのですか?
もし、あなたが
ActionPayload
に他のプロパティを受け入れさせたい場合は、インデクサを追加することができます。
interface ActionPayload {
actionType: string;
// Keys can be strings, numbers, or symbols.
// If you know it to be strings only, you can also restrict it to that.
// For the value you can use any or unknown,
// with unknown being the more defensive approach.
[x: string | number | symbol]: unknown;
}
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] TypeScriptでパラメータとして強く型付けされた関数は可能か?
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] Typescript によるインターフェース型チェック
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み] Typescriptでインターフェースやクラスを使用する場合 [重複].
-
[解決済み] Visual Studio Code - インポート引用符の設定を調整する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] describe'という名前が見つかりません。テストランナー用の型定義をインストールする必要がありますか?
-
[解決済み] Angular 2でアプリ起動時にサービスを実行する方法
-
[解決済み] 文字列ユニオンから文字列配列へ
-
[解決済み] tsc が `TS2307: Cannot find module` for a local file をスローします。
-
[解決済み] TypeScript "this" scoping issue when called in jquery callback.
-
[解決済み] ngForとAsync Pipe Angular 2でObservableオブジェクトから配列を利用する。
-
[解決済み] typescriptでmoment.jsをインポートするには?
-
[解決済み] tsconfigの "target "と "module "を理解する。
-
[解決済み] エラー Typescript Feature 1.5。現在の言語レベルは1.4です。
-
[解決済み] TSにおける文字列列列挙型と文字列リテラル型の相違点