TypeScript オーバーライド ToString() [終了しました]。
2023-08-20 15:45:53
質問
例えば、クラス
Person
というクラスがあり、これは次のように見えます。
class Person {
constructor(
public firstName: string,
public lastName: string,
public age: number
) {}
}
をオーバーライドして
toString
メソッドを次のようにオーバーライドします。
public toString(): string {
return this.firstName + ' ' + this.lastName;
}
これで、実行時に動作する以下のようなことができるようになると思います。
function alertMessage(message: string) {
alert(message);
}
alertMessage(new Person('John', 'Smith', 20));
でも、これでもこのエラーは出ます。
TS2345: 型 'Person' の引数は、型 'string' のパラメータに割り当てられません。
どのようにすれば
Person
をこの
string
という引数になりますか?
どのように解決する?
オーバーライド
toString
は、ある種の期待通りに動作します。
class Foo {
private id: number = 23423;
public toString = () : string => {
return `Foo (id: ${this.id})`;
}
}
class Bar extends Foo {
private name:string = "Some name";
public toString = () : string => {
return `Bar (${this.name})`;
}
}
let a: Foo = new Foo();
// Calling log like this will not automatically invoke toString
console.log(a); // outputs: Foo { id: 23423, toString: [Function] }
// To string will be called when concatenating strings
console.log("" + a); // outputs: Foo (id: 23423)
console.log(`${a}`); // outputs: Foo (id: 23423)
// and for overridden toString in subclass..
let b: Bar = new Bar();
console.log(b); // outputs: Bar { id: 23423, toString: [Function], name: 'Some name' }
console.log("" + b); // outputs: Bar (Some name)
console.log(`${b}`); // outputs: Bar (Some name)
// This also works as expected; toString is run on Bar instance.
let c: Foo = new Bar();
console.log(c); // outputs: Bar { id: 23423, toString: [Function], name: 'Some name' }
console.log("" + c); // outputs: Bar (Some name)
console.log(`${c}`); // outputs: Bar (Some name)
しかし、ときどき問題になるのは、このメソッドにアクセスする際に
toString
にアクセスできないことです。
console.log("" + (new Bar() as Foo));
FooではなくBarに対してtoStringを実行します。
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み] EqualsメソッドがオーバーライドされたときにGetHashCodeをオーバーライドすることが重要な理由は何ですか?
-
[解決済み] Eclipseにプロジェクトをインポートした後に「Must Override a Superclass Method」エラーが発生する。
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] TypeScriptでパラメータとして強く型付けされた関数は可能か?
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?