Angular/TS: 如何从部分扩展接口获取属性值？

Question

对 Angular/TS 很陌生，也许我表述有误，但我会尽力解释。

我有 2 个接口，一个像这样扩展另一个：

export interface CustomerModel {
   firstName: string;
   lastName: string;
    //other things
}

export interface OrderModel extends Pick<CustomerModel, 'firstName' | 'lastName' {
  orderNumber: number;
}

我已经使用硬编码的 Customer 实例创建了一个服务（在机器上本地工作，现在一切都是硬编码的。我最终会使用 DB，但我需要它首先以这种方式工作）

export class CustomerService {
  customers: CustomerModel[];
  constructor() {
    this.customers = [{
     firstName: 'John',
     lastName: 'Doe',
    //more here 
       },
{
     firstName: 'Jane',
     lastName: 'Smith',
    //more here 
       },
     ]
   }

   getCustomers(): Observable<CustomerModel[]> {
    const customers = of(customers);
    return customers;
 }
}

现在我正在尝试使用 OrderModel

创建订单服务

export class OrderService {
  orders: OrderModel[];
  constructor() {
    this.orders = [{
     orderNumber: 123;
     firstName: ???, //what do I put here to pick up the name from CustomerModel
     lastName: ???,
       },
     { 
    //more here 
       },
     ]
   }

   getOrders(): Observable<OrderModel[]> {
    const orders = of(orders);
    return orders;
 }
}

当我将鼠标悬停在订单服务中 firstName 的值上时，它确实说它来自 CustomerModel，所以我知道扩展有效。
如果我将 firstName 和 lastName 留在 orders 数组之外，我会收到一条错误消息，指出 OrderModel 需要它们。也许这是不可能的，可能有更好的解决方案，但我一直在兜圈子，试图看看这是否有效。谁能帮我从 CustomerModel 中获取属性 firstName/lastName 的值？

Answer 1

在这种情况下，最好的办法是使用一个单独的文件来保存用户的所有基本数据，然后将其转换为您以后需要的任何数据。

// app/some-folder/customers.ts
export const customers: CustomerModel[] = [
  {
    firstName: 'John',
    lastName: 'Doe',
    //more here 
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    //more here 
  },
];

并在服务中

import { customers } from '@app/some-folder/customers.ts'

export class CustomerService {

  public getCustomers(): Observable<CustomerModel[]> {
    return of(customers);
  }

}

import { customers } from '@app/some-folder/customers.ts'

// map the existing customers, and transform it to also have an orderNumber
// use ...a, orderNumber: i to merge the whole customer add orderNumber together
const orders: OrderModel[] = customers.map((a, i) => ({
  firstName: a.firstName,
  lastName: a.lastName,
  orderNumber: i,
}))

// or you can do this, which is more in-line with how an API would respond
// generally an order would just include the customerId, or have a customer object
// const orders = customers.map((a, i) => ({ customer: a, orderNumber: i }))


export class OrderService {

  public getOrders(): Observable<OrderModel[]> {
    return of(orders);
  }

}

这样当您实现 API 时，您所要做的就是交换函数的主体。

Angular/TS: 如何从部分扩展接口获取属性值？

Angular/TS: how to get the values of properties from partial extended interface?

typescript

angular

angular10