Angular 7将firebase UserInfo映射到自定义用户模型

Question

我是 Angular 7 的新手，我试图从 firebase 获取当前经过身份验证的用户并映射到我自己的 User 模型（User 中没有构造函数）。

在 Firebase API 中：

interface UserInfo {
  displayName: string | null;
  email: string | null;
  phoneNumber: string | null;
  photoURL: string | null;
  providerId: string;
  uid: string;
}

在我自己的模型中：

export class User{
  name: string;
  email: string;
  contactNo: string;
} 

我的UserService

@Injectable()
export class UserService {

  constructor(
    private fireAuth: AngularFireAuth, 
  ) {}

  getAuthUser(): Observable<User> {

    // this part is not working, how to map to User without changing User constructor?
    return this.fireAuth.authState.map(authData => new User({name: authData.displayName}));

  }

}

Answer 1

根据Angular Style Guide：

考虑为数据模型使用接口。

话虽如此，如果您愿意遵循该样式指南，则可以这样做：

使用可选字段创建User interface：

export interface User{
  name?: string;
  email?: string;
  contactNo?: string;
}

在您的服务中，您可以简单地执行以下操作：

@Injectable()
export class UserService {

  constructor(
    private fireAuth: AngularFireAuth,
  ) {}

  getAuthUser(): Observable<User> {
    return this.fireAuth.authState.map(authData => ({
      name: authData.displayName
    }));
  }

}

Answer 2

问题编辑后

我仍然推荐“在问题被编辑之前”的答案，但要回答问题：

new User({name: authData.displayName}) 不能在不调整构造函数的情况下工作。一个类有一个默认构造函数，在你的例子中是User()，它不接受任何参数。如果您必须或想要使用类而不是接口（如下所述），那么您应该可以使用一些解决方法。

粗略的例子：

// object "as"
authData => <User>{name: authData.displayName, ... other props}

// object "as" 2
authData => {name: authData.displayName, ... other props} as User

// new user, return after changing props
authData => {
    const user = new User();
    user.name = authData.displayName;
    // ...the rest
    return user;
}

// "builder" method (basically a constructor)
function buildUser(name: string, ...other props) {
    const user = new User();
    user.name = authData.displayName;
    // ...the rest
    return user;
}

---

问题被编辑之前 如果你不想使用构造函数并且类只是一个没有额外方法的模型，我建议使用接口。

// interface
export interface User {
  name: string;
  email: string;
  contactNo: string;
}

// inside map
authData => {name: authData.displayName, ...<other props>}

// inside map with type checking 1
authData => <User>{name: authData.displayName, ...<other props>}

This answer 有更多详细信息。