首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法添加鉴别器属性,以便使用Axios + Typescript将数据读取到已判别的联合对象中?

当然有办法!在 TypeScript 中,我们可以使用类型谓词(type predicates)和条件类型来为联合类型添加鉴别器属性。这样,当使用 Axios 获取数据时,我们可以确保数据符合预期的类型。

以下是一个示例,展示了如何使用 TypeScript 为联合类型添加鉴别器属性:

代码语言:javascript
复制
// 定义一个接口,表示 API 响应的数据结构
interface ApiResponse {
  id: number;
  name: string;
}

// 定义一个联合类型,表示可能的 API 响应数据结构
type ApiResponseType = ApiResponse | {
  error: string;
};

// 创建一个类型谓词,用于鉴别是否是有效的 ApiResponse 类型
function isApiResponse(obj: any): obj is ApiResponse {
  return obj && typeof obj.id === 'number' && typeof obj.name === 'string';
}

// 使用 Axios 获取数据
async function fetchData(): Promise<ApiResponseType> {
  const response = await axios.get<ApiResponseType>('/api/data');
  return response.data;
}

// 使用类型谓词来处理获取到的数据
async function processData(): Promise<void> {
  const data = await fetchData();

  if (isApiResponse(data)) {
    // 在这里,TypeScript 可以确保 `data` 是有效的 `ApiResponse` 类型
    console.log(data.id, data.name);
  } else {
    // 在这里,TypeScript 可以确保 `data` 是包含 `error` 属性的对象
    console.error('Error:', data.error);
  }
}

processData();

在这个示例中,我们首先定义了一个 ApiResponse 接口和一个 ApiResponseType 联合类型。然后,我们创建了一个 isApiResponse 函数,该函数使用类型谓词来鉴别是否是有效的 ApiResponse 类型。最后,我们使用 axios.get 获取数据,并使用 isApiResponse 函数来处理数据。

这样,当使用 Axios 获取数据时,我们可以确保数据符合预期的类型,并在 TypeScript 中获得更好的类型检查和代码补全支持。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券