Property 'queueSid' does not exist on type 'WorkerActionPayload'

Question

I am trying to get queueSid from task but it causes my app to break completely with a console error "The above error occurred in the ACW component:"

class ACW extends React.Component<AfterCallWorkOwnProps> {
  constructor(props: AfterCallWorkOwnProps) {
    super(props);
  }
  
  render(): JSX.Element {
    const featureFlags = new Config(Manager).config().features;
    const workerAttributes = Manager.getInstance().workerClient.attributes;
    const { task, queuesList } = this.props;
    **const queueData = getQueueData(queuesList, task?.queueSid);**
    console.log("task", queueData)

    return (
      <Portal
        containerId="acw-wrapper-container"
        reduxKey="enableAutoDispositionForACW"
        reduxValue={true}
        key="ACW-Portal"
        config={{ loaded: true, enableAutoDispositionForACW: true } as ConfigState}
      >
        {task &&
          TaskHelper.isInWrapupMode(task as ITask) &&
          featureFlags.enableAfterCallWork && isBoolean(workerAttributes.enableAfterCallWork) && (
            <Container>
              {`You have `}
              <CountdownTimer
                workerAttributes={workerAttributes}
                reservationId={task.sid || ''}
              />
              {` seconds to wrap up`}
            </Container>
          )}
      </Portal>
    );
  }
}

The getQueueData function

export const getQueueData = (queuesList: QueuesList[], queueSid: string) => {
  const queue = queuesList.find((x) => x.queueData.sid === queueSid);

  return queue?.queueData.props;
};

the task is traced to

export interface WorkerActionPayload {
    **task?: ITask;**
    sid?: string;
}

which is traced to an ITask

export interface ITask {
    source: any;
    sourceObject: any;
    addOns: object;
    age: number;
    attributes: Record<string, any>;
    dateCreated: Date;
    dateUpdated: Date;
    priority: number;
    queueName: string;
    **queueSid: string;**
    reason: string;
    sid: string;
    status: TaskReservationStatus;
    taskSid: string;
    taskStatus: TaskTaskStatus;
    taskChannelSid: string;
    taskChannelUniqueName: string;
    timeout: number;
    workflowName: string;
    workflowSid: string;
    workerSid: string;
    incomingTransferObject: TaskTransfer;
    outgoingTransferObject: TaskTransfer;
    routingTarget: string;
    defaultFrom: string;
    channelType: string;
    conference: Conference;
    complete: () => Promise<any>;
    transfer: (to: string, options: any) => Promise<any>;
    hold: (holdMusicUrl?: string, holdMusicMethod?: string) => Promise<any>;
    unhold: () => Promise<any>;
    holdParticipant: (targetSid: string, holdMusicUrl?: string, holdMusicMethod?: string) => Promise<any>;
    unholdParticipant: (targetSid: string) => Promise<any>;
    cancelTransfer: () => Promise<any>;
    kick: (targetSid: string) => Promise<any>;
    setAttributes: (attributes: object) => Promise<any>;
    wrapUp: () => Promise<any>;
}

In the ITask the queueSid is in there but I get the error "Property 'queueSid' does not exist on type 'WorkerActionPayload'." when I hover over the red underlined queueSid in my VS Code. What is causing this? I also tried replacing task with (task as ITask) but same results

Answer 1

Well I can't see what your props are, but my assumption is that the task variable is actually of type WorkerActionPayload, which would mean you would need to write task?.task?.queueSid. Obviously renaming the task variable would be a good idea, if this is indeed the case.