Question

我声明了一个类型化的变量，该变量将保存服务获取的数据。但是，返回的数据与变量的类型不同，但是变量仍然可以接受数据。

这是我的代码：

Data: Array<{Currency: string, Rate: number}>;

getData(): void {
  this.DataService.getAll().subscribe(
    (res: Array<any>) => {
      this.Data = res;
    },
    (err) => {
      console.log(err);
    }
  );
}

我尝试了以下操作，但仍然无法正常工作：

res: Array<{Currency: string, Rate: number}>

更新

这是我的服务

getAll(): Observable<Array<{Currency: string, Rate: number}>> {
    return this.http.get(`${this.baseUrl}/data`).pipe(
      map((res) => {
        this.data = res['data'];
        return this.data;
    }),
    catchError(this.handleError));
  }

更新2

我在这里发现了类似的问题：https://github.com/angular/angular/issues/20770

Answer 1

您可以通过以下方式创建模型：

export interface CurrencyModel {
  Currency: string,
  Rate: number
}

然后使用此模型作为响应：

Data: CurrencyModel[];

getData(): void {
  this.DataService.getAll().subscribe(
    (res: CurrencyModel[]) => {
      this.Data = res;
    },
    (err) => {
      console.log(err);
    }
  );
}

getAll应该返回Observable<CurrencyModel[]>

Answer 2

因为在运行时没有类型安全。

记住TypeScript在编译时会转换为JavaScript。到那时，所有赌注都消失了。

如果要确保某种类型的安全性，我建议使用一些带有自动生成代码的工具的API文档，例如带有swagger的OpenAPI。

Answer 3

any根据定义可分配给任何对象。因此Array<any>将可分配给任何其他数组类型。我会不惜一切代价避免使用any。如果您真的不知道某种类型，请使用unknown并根据需要使用显式声明，最好使用显式声明，而不要使用静默any分配。

Data: Array<{Currency: string, Rate: number}>;

getData(): void {
  this.DataService.getAll().subscribe(
    (res: Array<unknwon>) => {
      this.Data = res as Array<{Currency: string, Rate: number}>;
    },
    (err) => {
      console.log(err);
    }
  );
}

理想情况下，getAll()应该返回Observable<Array<{Currency: string, Rate: number}>>。在res上必须使用no type注释，并且所有注释都是类型安全的。

Answer 4

TypeScript是JavaScript之上的扩展，为编写代码的过程提供了类型支持。无论如何，在运行程序之前，所有TypeScript代码都将转换为纯JavaScript。因此，编译后所有类型实际上都会丢失。

如果您在运行时返回的数据与您声明的变量的类型不同，则TypeScript没有机会警告或阻止这种情况。这是因为TypeScript只能检查静态类型，而不是动态类型，就像您收到服务器响应一样。您将需要另一种验证机制来验证服务器数据是否与TypeScript定义相对应。

为什么打字稿无视变量类型？

4 个答案: