Question

我正在使用angular7，我想将json映射到我的界面。我需要一个函数来通过接口映射json字段，并且还需要一个与inteeface不兼容的json值返回错误。

export interface User {
  firstName: string;
  lastName: string;
  phoneNumber: number;
};

const json = {
  firstName: 'Paresh',
  lastName: 'Gami',
  phoneNumber: 'num'
};

在我的示例中，电话号码的类型不可分配给界面。我想知道如何处理坏数据

Answer 1

export interface User {
  firstName: string;
  lastName: string;
  phoneNumber: number;
};

const json = {
  firstName: 'Paresh',
  lastName: 'Gami',
  phoneNumber: 'num'
};

var result:User = {};// initialize your result as an empty object of type "User"(interface)

然后

result = {
  firstName: json.firstName,
  lastName: json.lastName,
  phoneNumber: json.phnoeNumber
 }; // Map your json data to your result

Answer 2

如@pascalpuetz所述，Typescript接口在运行时不存在。 TS将被编译成JS，您知道，JS是一种非常动态的语言，对象没有类型，可以随时动态更改。

如果仍然需要映射，则需要添加一个类并映射属性：

export interface IUser {
  firstName: string;
  lastName: string;
  phoneNumber: number;
};

export class User implements IUser {
  firstName: string;
  lastName: string;
  phoneNumber: number;

  constructor(json: IUser) {
    this.firstName = json.firstName;
    this.lastName = json.lastName;
    this.phoneNumber = json.phoneNumber;
  }
}


const json = {
  firstName: 'Paresh',
  lastName: 'Gami',
  phoneNumber: 'num'
};

...

const result = new User(json);

在分配某些json的情况下，例如：

const result = new User({
   firstName: 'Paresh',
   lastName: 'Gami',
   phoneNumber: 'num'
});

Typescript已经显示错误，表明属性phoneNumber的类型不可分配。但是在分配匿名json的情况下，例如：

const json: IUser = await fetch('someurl');
const result = new User(json);

这是可行的，并且在运行时（兼容JS之后），它不会考虑json是否具有正确的属性。

JavaScript将分配属性，无论json具有什么。因此，您必须自己比较属性的类型。

constructor(json: IUser) {
    if (typeof json.firstName === 'string') {
        this.firstName = json.firstName;
    } else {
        throw 'Bad Data';
    }
    ...
}

如何将json映射到angular7中的接口？

2 个答案: