Axios响应类型为any问题：data为何含any[]？如何改为AxiosResponse<Scenario[]>？

安全阿岳

2026-7-7

TypeScript类型疑问：data为何包含any[]？

以下是我整合自不同文件的代码：

import axios from "axios";
import { useQuery } from '@tanstack/react-query';

interface Scenario {
    id: number,
    name: string
}

const scenario = {
    getAll: () => axios.get<Scenario[]>(`/api/dyn/ax_scenario`)
}

const { 
    isLoading,
    isErrors, // 注意：react-query的正确字段是isError，不是isErrors
    data = []
} = useQuery({
    queryKey: ['api.scenario.getAll'],
    queryFn: api.scenario.getAll // 注意：你定义的是scenario对象，不是api.scenario，应该是scenario.getAll
});

当我悬停在data上时，TypeScript显示其类型为：

const data: any[] | AxiosResponse<Scenario[], any>

请问为何类型中会包含any[]？我希望响应类型仅为AxiosResponse<Scenario[]>。

原因分析

你给data设置了默认值= []，而TypeScript会把空数组[]自动推断为any[]类型。useQuery返回的data原本类型是AxiosResponse<Scenario[], any> | undefined，加上默认值后，TypeScript会将默认值类型与原类型做联合，最终得到any[] | AxiosResponse<Scenario[], any>。

解决方案

移除默认值：如果可以接受初始状态下data为undefined，直接删掉= []，此时data类型会是AxiosResponse<Scenario[], any> | undefined：

const { 
    isLoading,
    isError,
    data
} = useQuery({
    queryKey: ['api.scenario.getAll'],
    queryFn: scenario.getAll
});

指定默认值的正确类型：如果一定要保留默认值，需要构造一个符合AxiosResponse<Scenario[], any>类型的空响应对象作为默认值：

const emptyResponse: AxiosResponse<Scenario[], any> = {
    data: [],
    status: 200,
    statusText: 'OK',
    headers: {},
    config: {}
};

const { 
    isLoading,
    isError,
    data = emptyResponse
} = useQuery({
    queryKey: ['api.scenario.getAll'],
    queryFn: scenario.getAll
});

另外需修正代码里的两处错误：