当然有办法!在 TypeScript 中,我们可以使用类型谓词(type predicates)和条件类型来为联合类型添加鉴别器属性。这样,当使用 Axios 获取数据时,我们可以确保数据符合预期的类型。
以下是一个示例,展示了如何使用 TypeScript 为联合类型添加鉴别器属性:
// 定义一个接口,表示 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 中获得更好的类型检查和代码补全支持。
领取专属 10元无门槛券
手把手带您无忧上云