我如何在map函数内为一组变形对象定义接口？

Question

所以这是我到目前为止所拥有的。我尝试了许多潜在的解决方案，但下面始终收到相同的错误。任何线索或信息都将非常有帮助。

interface RequestedOptions {
   name: string;
}

interface TicketOptions {
    serviceId: string;
    description: string;
    requestedAt: string;
    status: string;
    requester: RequestedOptions;
}

const tickets = transaction?.localTickets || [];

{tickets.map(
    ({ serviceId, description, createdAt, status, requester }: TicketOptions) => (
        <div className={styles.row} key={serviceId}>
        ...

这是我一直遇到的错误...

Argument of type '({ serviceId, description, createdAt, status, requester }: TicketOptions) => JSX.Element' is not assignable to parameter of type '(value: { readonly serviceId: string | null; readonly description: string | null; readonly createdAt: string | null; readonly status: string | null; readonly requester: { readonly name: string | null; } | null; } | null, index: number, array: readonly ({ ...; } | null)[]) => Element'.
  Types of parameters '__0' and 'value' are incompatible.
    Type '{ readonly serviceId: string | null; readonly description: string | null; readonly createdAt: string | null; readonly status: string | null; readonly requester: { readonly name: string | null; } | null; } | null' is not assignable to type 'TicketOptions'.
      Type 'null' is not assignable to type 'TicketOptions'.ts(2345)

Answer 1

似乎transaction.localTickets具有类型

interface TicketOptions {
    readonly serviceId: string | null;
    readonly description: string | null;
    readonly requestedAt: string | null;
    readonly status: string | null;
    readonly requester: RequestedOptions | null;
}

RequestedOptions在哪里

interface RequestedOptions {
   name: string | null;
}

因此TS认为您的TicketOptions类型和transaction.localTickets不兼容。只需按照上图所示设置TicketOptions和RequestedOptions，它就可以解决您的问题。