親クラスと同じ名前のプロパティを上書きし、新たな型を与えたいです。

Question

実現したいこと

Aクラスを継承するBクラスがあり、protected _params という同じ名前の内容の違うオブジェクトを持っています。Bでそのオブジェクトをオーバーライドし、型アサーションをしたのですが、Bの _paramsの型がAParamsから変更できません。

該当のソースコード

type AParams = {
  name: string,
  age: number,
  fuga: string;
};

class A {
  protected _params: AParams = {
    name: "A",
    age: 12,
    fuga: 'AA'
  };
}

type BParams = AParams & {
  name: string,
  age: number,
  hoge: number;
};

class B extends A {
  constructor() {
    super();

    this._params = {
    ...this._params,
      name: "B",
      age: 12,
      hoge: 1
    } as BParams;
  }
}

エラーメッセージ

クラスBの this._params は、AParams のままです。(vscode, typescript 5.2.2)

試したこと

PT3.5の提案も以下のものを試しましたがだめでした。

//1.
(this._params as BParams) = {
...this._params,
name: "B",
age: 12,
hoge: 1
}

//2.
this._params = {
...this._params,
name: "B",
age: 12,
hoge: 1
} as Bparams

//3.
this._params = {
super["_params"],
name: "B",
age: 12,
hoge: 1
}

よろしくお願いします。

Comments

[honamin]

コードが見辛くなってしまい、申し訳ございません。

[honey32]

失礼します。 そもそも「protected _params プロパティを持つ A と、それを継承した A を作る」こと自体がチグハグな印象を受けます。

差し支えなければ、どのようなメソッド・関数を実装するためにこのようなクラスを作ろうとされているのかも共有していただけると考える材料になるかもしれません。

[honamin]

質問ありがとうございます。
未熟なもので、おかしなことを書いているかもしれませんが、申し訳ありません。

class Aがまずあり、それを class Bが継承します。
class Bは A とほぼ同じ機能を持っていますが、少しだけ高機能で、パラメータの種類が増えます。

ここで、Aのもつ _params を引き継ぐ語ちでBでオーバーライドして使いたいです。
しかしオーバーライドしても型を変更できませんので質問いたしました。

[honamin]

class Aのパラメータは、this._paramsA 、 class B のパラーメータは this._paramsB と、名前を別にして、class Bでは

this._paramsB = {
...this._paramsA,
newPropA: 1,
newPropB: 2,
}

とすれば、期待通りなのですが、これだと、class Bは２つパラメータの(_paramsAと_paramsB)を持つことになってしまいます。できれば同じ名前の _params で、継承する側が親の同名のプロパティを上書きする形にしたいと考えています。　上書き自体はできるのですが、なぜか型が替えられません(Aの_paramsのままになる)

[honey32]

その「パラメータ」と呼ばれているものについて、それはどこで読み書きされることを目的とされていますか？

外部から読み書きしたいだけなら

```typescript
interface WithParams<P> {
params: P
}
```

のようなインターフェスを A, B それぞれが実装するだけで住むと思いますが、protected ということは、クラス内で使用されるということですよね？

[honamin]

親クラスAの_params: APrams プロパティに、継承するBクラスが、新しいkeyを追加してそれをBparamsとしたいのですが、それがどうやってやるのかわからないという質問です。

Answer 1

とりあえずこのようにすれば書けそうです。

type AParams = {
  name: string,
  age: number,
  fuga: string;
};

class A {
  // B から使うには、一度 static （またはクラスの外の変数）に入れる必要がある
  static defaultParams: AParams = {
    name: "A",
    age: 12,
    fuga: 'AA'
  }

  protected _params: AParams = {
    ...A.defaultParams,
  }
}

class B extends A {
  // B 側でもう一度 _params プロパティを宣言しなおす必要がある
  // (override は必須ではないが、名前間違いをチェックしてくれる)
  protected override _params: AParams & {  hoge: number; }

  constructor() {
    super();

    this._params = {
      ...A.defaultParams,
      name: "B",
      age: 12,
      hoge: 1,
    }
  }

  printSelf() {
    console.log(JSON.stringify(this._params))
  }
}

TypeScript Playground でホバーして色々試せます。

https://www.typescriptlang.org/play?#code/C4TwDgpgBAggCgQwE4ILYGcoF4oG8oAWA9gOYQBcU6wSAlgHYlQC+AUKwMYA2C6mMeVlCgB6EVABCUQNIMgSIZA-vKAxBkDWDIHsGQIAMgADlAZXpVgCYLQ5RAEP+A-BkD6DKsD1DIEuGQJ0MgOwZAaJqPAkJqAHU0CQ-8sCmioBiGQGiGQFH9QEDIwBkGQCEGQKE9AyMoABMIADMEAFcuYEQUDEp4ZDRMHFxY4WIySgAiCogq2LZYsCQiYAgONsSoAH0wQrzYHKLsQWFhADpJmHHktMzs-vQAGgbWRu5eTCkIAA82+kT+UdFxKUAXBUBzBkAghkUdHr7czEB1hkBbhkBFhkAxhkBihkAkhkBi7UAAFGAdQZAFYMgCkGQCaDGEojFhGIoAAKIgANwgSDoySgqmCgAgMi6qEGAEQZwupALAqgFklQDJqYBVBMJP0AgwyAcoZAMMM1iBgDMGQDyDEEAJRNFptDoQLootEY6C9Rb5IYYKAAMjwUBS6RICEo9HSqAARmiWOxhBwiPRqEh0h0iEgETzjsJ0OlIJaeQBufVjYAEWjocaSx4jUpjMaTcbTWYZLIy5ZlMbK1WUABMKwDbGEjWEzQYwAAyhAuCkrTaoIbjUQuBBxlxSAiAFKZgDyADlxiaGCRaCkQAj3Z7vQ8ijy+Sm1uxWEA

Comments

[honamin]

回答ありがとうございます。また、Playgroundというものを教えてくださって助かります。
「親クラスのプロパティを継承しつつ上書きする」というのは一般的な手法だと思っていましたが、回答を見ると、想像以上に複雑で、根本的に自分の認識が間違っているとおもい、よく確認してみたら、クラスBは親のプロパティを持てるだけで、上書きできていませんでした。
長々と質問にお付き合いくださり、ありがとうございます。

[honamin]

最終的に以下が希望通りの動きになり、解決しました。
https://www.typescriptlang.org/ja/play?#code/PTC84yu8CgQAQCUD2AjFAXBBBeYZCZZZMBPABwFNl0scARKgMwEMBXAG0wAVWAnVgFsAzglAIA3rASyEAO2FUAXAhGZ+AS3kBzADQy57EVRzzMVRQH5VGFJyqt5BuQks7tVGwgDknFADuPggAPr7yKPxCrJzBYT4AFpo6CT4GAL4kAMacrCJiqBiYOFKGshT8WFRZFgAmCAD6FALCIsqF9ExsXLwtouKlrq6KQiq+SADyAEITDQCMAEwAzAAsaWVDxqbmlqyqbJwmLkOy7p6qfoE+G5muFVU1VPVNgVT8A3MADJ8A3CSuWRQ8nU-HYNUiAApmoJRDYOsUuhxuHwYSIAJSDE4ITBJEQAOiafTEEmkWKGeIpOM0+MJqOOZNkFLx0NaG1cmTZcip+O0mkwELRN3+cnuFke9V5-IxpKxmmYEO5BJZojxZ3kNAgvn8QWlnJOipeATeAwAHL89QhbnJMhzAcDsJUiiUJOqArQnRCZbIRmMfFN0OtXGrfREojFruk0X98ERY5B8O6sAgpjG43GSORqInMFNET0Ua0BvDGCwkb1UQgAGSY2RbACiQiwmiB3jsDicCEQ8KmCEABgyARQZADIMgEBjQDGDIAzBkAIgyAaIZAIsMgEuGQCHDIAfhkA-QywW25fLZntUAAeFnktQKdGKNYQouqdUayra3bzyKJAy95IpInY1H4AG0fLTWj4AF09E7YAEEAZQZABiGQAkhkAEwZ+2nQALBkAVXlAFFTQBpBkAck1AAg5QBqTSZC0tjMQ89mxUEqGAkCEEAKsjADsGYcYIXFdVygwAoOUAD7NAFkGC1gwuJIUjSSjaPoxi11YziCJMBsmyBfYYhMSjAHGGQBVhkASoZAGuGQAJhkAWijACztIUNjtEEwUwSFb1Ue9S3zIldTJd9PwFC0DVvZ8LVcJknKJekGSZW8vPZYV9VxPFJQc-yNkvcUEBCmysTst5gvkPkBWjMk5QVIK-xVetG0wZt5BihlKI8itAHsGHcEBowBo9UAawZACsGCcZwtdJZCFW0gXUZMBldHdPQ2H0LgYSJWCoRt5EDIxJJyvLVA0dgqA3QUgA