属性在 NextJs 中的 axios 响应中的类型"never".ts(2339) 上不存在

Question

我正在做一个NextJs项目，我是NextJs的新手。我在Axios上遇到了一个问题。我正在使用VS代码，并试图访问(response.data.sliders)，但我的编辑器显示错误。错误是"属性'sliders'不存在于类型'never'.ts(2339) '"。但是在执行console.log(response.data)之后，我可以清楚地看到那里的"滑块"。我得到滑块数据，但vs代码显示错误。我对此很沮丧，但突然间，当我想问一个关于我的问题的问题，我得到了解决方案，它神奇地为我工作!所以我想为什么不把这个问题的解决方案写下来，这样像我这样的人就可以从中得到帮助。我会附上一个屏幕截图和我的项目的一个小代码片段，这样你就可以清楚地了解我的问题。这是console.log(response.data)

的结果这是我的代码。

import axios from "axios";
const IndexPage = (props) => {
return (
<main>
<Section1 Section1Props={props.Section1Props} />

</main>
);
};

export async function getServerSideProps(context) {
try {
const response = await axios.get(urlGenerator("api/v1/frontend-configuration"));

const data = await response.data;
return {
props: {
Section1Props : data.sliders, // here I was getting the error for 'sliders'

},
}

} catch (error) {
console.log(error);

}

}
export default IndexPage;

Answer 1

最后我发现问题出在我的axios import语句中。我需要像这样导入axios -

const { default: axios } = require('axios'); // or
const axios = require('axios').default;

而不是-

import axios from "axios";

我不知道为什么它工作虽然。但我还是很开心，希望这对你也有帮助。如果你知道它为什么有效，请在这里解释。了解整个事情对我很有帮助。

Answer 2

我通过如下声明响应变量来解决这个问题

const responseTest: AxiosResponse<any>  = await axios.get('https://api.github.com/users/maths032')


alert(responseTest.data.id)

并按如下方式导入axios

import axios, { AxiosResponse } from "axios";

我不知道这是不是最好的方法，但它对我很有效。

Answer 3

来自axios文档:

为了获得TypeScript类型(用于智能感知)autocomplete)，而使用CommonJS导入时，require()使用以下方法:

const axios = require('axios').default;
// axios.<method> will now provide autocomplete and parameter typings

我需要一个ESM导入，所以我是这样做的:

import axios, { AxiosResponse, AxiosError } from 'axios';
const Axios = axios.default;