ResourceStateインターフェイス内で入力されるデフォルトの状態値を持つ抽象クラスがあります。State抽象クラスの状態プロパティに拡張を割り当てようとすると、次のエラーが発生します。交差点を使用してさまざまな方法を試しましたが、まだ機能しません。私が達成したいのは、デフォルトプロパティ以外の値を追加できるように、stateプロパティへのジェネリックインターフェイスを提供できることです。
これは私が得たエラーです：
タイプ '{items：never []; isLoading：false; エラー：文字列; } 'はタイプ' State 'に割り当てることができません。'{アイテム：なし[]; isLoading：false; エラー：文字列; } 'はタイプ' State 'の制約に割り当て可能ですが、' State 'は制約' ResourceState 'の異なるサブタイプでインスタンス化できます。
これは私のコードです：
export interface BaseItem {
id: string;
name: string;
}
export interface ResourceState < Item extends BaseItem > {
items: Item[];
selectedItem ? : Item;
isLoading: boolean;
error: string;
}
export abstract class Resource < Item extends BaseItem, State extends ResourceState < Item > , Mutations, Getters, Actions > {
state: State = { // this is where the error occurs
items: [],
isLoading: false,
error: '',
}
}あなたが言うときState extends ResourceState<Item>、あなたはそれを言っているStateのニーズが準拠するResourceState<Item>が、これはジェネリック型パラメータであるので、それは正確ではないかもしれませんResourceState<Item>。
これを想像してみてください：
interface MyState extends ResourceState<{ a: 123 }> {
myCustomRequiredProperty: number
}
次にクラスを渡しMyState、State状態を次のように構築します。
state: State = { // this is where the error occurs
items: [],
isLoading: false,
error: '',
}
次に、必要なプロパティを使用stateして変数を作成しませんmyCustomRequiredProperty。
これは、typescriptが（暗号的に）伝えようとしているエラーです。
あなたが状態変数構築している場合はResource、クラスを、その後、Stateこのクラスでは、あなたの実行可能コードは、一般的に渡すことができますタイプのすべてのプロパティを知ることができないので、一般的なことではないはずです。そうStateはならないextend ResourceState<Item>、それは正確でなければなりませんResourceState<Item>。
これは次のようになります。
export abstract class Resource<Item extends BaseItem> {
state: ResourceState<Item> = {
items: [],
isLoading: false,
error: '',
}
}
ただし、状態にプロパティを追加する機能が必要な場合は、いくつかの初期値がないと実行できません。どういうわけか、これらの不明なプロパティを初期化する必要があります。そのためには、上記のアプローチを使用しますが、完全な状態であるすべてのタイプを受け入れるコンストラクターを使用して、その情報を持つオブジェクトをそのタイプの不明なプロパティに入力します。
export abstract class Resource<
Item extends BaseItem,
State extends ResourceState<Item>
> {
state: State
constructor(initialState: State) {
this.state = {
...initialState, // Fills in extended properties
items: [],
isLoading: false,
error: '',
}
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加