Typescript 不允许访问端点响应上的数据属性

Question

由于 TS，我在尝试访问端点响应中的对象时遇到问题。基本上问题是，即使response.data.success为假，我也需要评估response.data.data，并且此时TS不会让我访问端点响应中的数据对象。以下是我的重要类型和接口：

type ApiResponse<D = any, M = any> = ApiResponseSuccess<D, M> | ApiResponseError;

interface ApiResponseSuccess<D, M = any> {
    data: D;
    meta?: M;
    success: true;
    message?: string;
    valid?: boolean;
}

interface ApiResponseError {
    success: false;
    message: string;
    error_code: string;
    valid: boolean;
}

interface MessageData {
    total_messaged: number;
    message:        string;
}

interface MessageErrors {
    beauty_ids: string[];
}

interface MessageModels {
    success: string;
    data:    MessageData;
    message: string;
    errors:  MessageErrors;
}

这是我将请求发送到端点的函数：

    const sendMessageToAllCastingApplicants = (finalObject: object) => {
        sendMessageToAllApplicants({ context }, finalObject)
            .then((response) => {
                const responseData = response.data;
                if (responseData.success) {
                    const { message } = responseData.data.data; // Destructure data properties
                    openToast(i18n.t(message), 'is-success'); // Use message directly
                }
                if (!responseData.success || responseData.data.data.total_messaged === 0) {
                    openToast(i18n.t(responseData.data.data.message), 'is-danger'); // Use message directly
                }
            })
            .catch((error) => {
                // Handle the error appropriately
                openToast(i18n.t(error.message), 'is-danger');
            });
    };

如您所见，我需要评估

!responseData.success

，此时 TS 不允许访问

responseData.data.data.message

（使用 VSC，我可以看到它只允许访问顶级属性）。

所以在这段代码中：

 if (!responseData.success || responseData.data.data.total_messaged === 0) {
    openToast(i18n.t(responseData.data.data.message), 'is-danger'); // Use message directly
}

我得到：

“ApiResponse”类型上不存在属性“data”。 “ApiResponseError”类型上不存在属性“data”。

尝试访问时

responseData.data

这是我的 API 响应的重要部分：

{
  "data": {
    "success": "true",
    "data": {
      "total_messaged": 1,
      "message": "Messages sent successfully"
    }
  },
}

最重要的是，我真的不明白为什么我必须做类似

responseData.data.data.message

的事情，如果我已经声明了

responseData = response.data

。任何帮助将非常感激。

Answer 1

Property 'data' does not exist on type 'ApiResponse<MessageModels, any>'.
  Property 'data' does not exist on type 'ApiResponseError'.

出现此信息是因为您在通过处理

data

案例将类型范围缩小为

ApiResponseSuccess<D, M>

之前尝试访问

success == false

。

TS游乐场

(response) => {
  // response may be an ApiResponseError at this point
  if (!response.success) {
    throw new Error('Request failed')
  }
  // response is now an ApiResponseSuccess<MessageModels, any> and has data
  const responseData = response.data;
  if (responseData.success) {
    const { message } = responseData.data; // Destructure data properties
    openToast(i18n.t(message), 'is-success'); // Use message directly
  }
  if (!responseData.success || responseData.data.total_messaged === 0) {
    openToast(i18n.t(responseData.data.message), 'is-danger'); // Use message directly
  }
}