Question

我已经读过新的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));

}

我收到的JSON与我的模型类（ValorTest）匹配。

问题：为什么console.log将数据类型显示为对象而不是ValorTest？

Answer 1

typeof调用只会发出JS的内置类型，您可能要做的是检查instanceof，它会告诉您返回的值是否与您的自定义类型相匹配！

Answer 2

如果您正在进行类型检查/断言，则可以使用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内置的数据类型，例如字符串，布尔值，对象等。如果你look at the way TypeScript transpiles加入JavaScript，你可以在运行时理解为什么JavaScript只知道您的实例是＆＃34;对象＆＃34;。

<强>更新

这仅适用于使用新的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

Answer 3

与HttpClient无关，所有的打字稿代码和类型都转换为浏览器可以编译的javascript，然后javascript使用对象处理它们，所以在控制台中它只知道对象。

Angular4 HttpClient TypeCheck问题

3 个答案: