新しいAngularのHttpClientがTypeCheckingを実行できることを読みました。これに基づいて、次のコードを記述します。
post(path: string, body: Object = {}): Observable<ValorTest> {
return this.http.post<ValorTest>(path, JSON.stringify(body))
.map((data: ValorTest) => {
console.log(typeof data); // Why console displays 'data' as object instead of ValorTest?
console.log(data instanceof ValorTest); // outputs: false
console.log(data); // outputs (no type displayed in Chrome's console): {codigo: "INF00001", estado: "Success"}
})
.pipe(catchError(this.formatErrors));
}
モデルクラス（ValorTest）と一致するJSONを受信しています。
質問：console.logがValorTestではなくオブジェクトとしてデータのタイプを表示するのはなぜですか？
タイプチェック/アサーションを実行しているだけの場合は、instanceofを使用できます。実際にクラスの名前を出力する必要がある場合は、data.constructor.nameを試すことができます。
class TestClass {}
var instance = new TestClass();
console.log(typeof instance);
// Expected output: "object"
console.log(instance.constructor.name);
// Expected output: "TestClass"
if (instance instanceof TestClass) {
console.log("instance is TestClass");
}
// Expected output: "instance is TestClass"
理由について：typeofは、文字列、ブール値、オブジェクトなど、JavaScriptの組み込みデータ型でのみ機能します。TypeScriptがJavaScriptに変換される方法を見ると、実行時にJavaScriptがインスタンスのみを認識している理由を理解できます。 「オブジェクト」です。
更新しました
これは、新しいclass（）コンストラクターで作成されたインスタンスでのみ機能します。HttpClientは、実際にはここでクラスのインスタンスを作成していません。基本的には、（開発目的で）応答で受け取ると予想されるデータの種類をTypeScriptで指定できるようにするだけです。私の知る限り、HttpClientは、応答データが実際にそれらの期待を満たしていることを（実行時に）保証するために何もしません。実行時に強力な型チェックが必要な場合は、おそらく独自の型ガード関数を作成する必要があります。
したがって、このようなクラスがある場合：
class TestClass {
prop: string;
constructor() { }
method(): void {}
}
次のようなタイプガードを作成できます。
function isTestClass(obj: TestClass | object): obj is TestClass {
// add whatever type checking logic you need here
return (<TestClass>obj).method !== undefined &&
(<TestClass>obj).prop !== undefined;
}
そして、実行時にデータを確認します。
var obj_a = { prop: "" },
obj_b = { prop: "", method: null };
console.log(isTestClass(obj_a));
// Expected output: false
console.log(isTestClass(obj_b));
// Expected output: true
型ガード関数をクラスの静的メソッドにするかもしれません。
また、余談ですが、クラスの代わりに応答データにインターフェイスを使用することを検討することもできます。これは主に、受け取ったデータに期待する実装がある場合とない場合があるという直感を促進するのに役立つためです。
ユーザー定義のタイプガードの詳細については、https：//www.typescriptlang.org/docs/handbook/advanced-types.htmlをご覧ください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加