使用 3rd-party API 时如何为 Axios.get 编写 TypeScript 类型答案

【问题标题】：How to write TypeScript types for Axios.get when using 3rd-party API使用 3rd-party API 时如何为 Axios.get 编写 TypeScript 类型
【发布时间】：2021-11-18 07:05:23
【问题描述】：

这里问的第一个问题，所以我会尽量总结一切。我正在尝试定义从 TMDB-API 的 axios.get 返回的数据类型，TMDB-API 是一个电影数据库。

这就是我返回的 get-request 中 JSON 的结构方式。 （简体）

{
    data: {
        results: [
            {
                name: 'Free Guy'
                poster_path: "/yc2IfL701hGkNHRgzmF4C6VKO14.jpg"
            },
            {
                name: 'Squid Game'
                poster_path: "/uu4TgyyW259aOZHN0Ew4TEfjnUG.jpg"
            },
        ]
    }
}

我正在设置这样的状态

interface MovieType {
    name: string
    poster_path: string
}

const [movies, setMovies] = useState<MovieType[] | []>([]);

我正在发出我的 get-request，它为我提供了上面指定的正确 JSON。但我一定做错了，因为我从 TypeScript 得到的错误是： Property 'results' does not exist on type 'DataMovieType'.ts(2339)

interface DataMovieType {
    data: {
        results: MovieType[]
    }
}

const request = await axiosInstance.get<DataMovieType>(fetchUrl);
setMovies(request.data.results);

我可以通过不指定 axios.get<Type> 来规避这个问题但那将是我不想要的任何东西，除非那是唯一的方法。

我也尝试过像这样编写 DataMovieType，但这也不起作用，因为它给了我同样的错误。

interface DataMovieType {
    data: {
        results: {
            name: string
            poster_path: string
        }
    }
}

我对 TypeScript 很陌生，这可能是一个简单的解决方法，但我现在完全迷失了，试图解决这个特殊问题。

如果需要更多信息，我很乐意为您提供。

提前致谢，约翰。

【问题讨论】：

不应该是request.data.data.results吗？（尽管我将 request 命名为 response）
这消除了我的错误，但它没有设置它，因为它是一个空对象。那么我的 DataMovieType 是不是错了？我应该删除数据并直接写入结果吗？这实际上有效，但对我来说没有意义，为什么对象的数据部分只是（消失）？
是的，尝试一下，查看官方文档，JSON 中似乎没有 data 字段。您必须提供给axios.get<T> 的类型/接口（@987654334@）反映在response.data 中（换句话说，response.data 的类型是T 而不是response 的类型）。
非常感谢，它现在工作了！虽然这对我来说仍然有点奇怪，因为这是我记录响应时的样子。 imgur.com/a/dyQSwMG 但我想这就是你所描述的，它默认为 response.data 因为配置对象也来自 axios。这让我觉得它是实际物体的一部分。谢谢！
一些专业提示：只需使用 Postman 或 Insomnia 之类的工具先检查 API 输出（你不会看到 data/config 在那里，你会看到服务器实际发送了什么你）。其次，不必费心手动输入响应。如果响应是 JSON 格式，那么有许多在线工具（例如 transform.tools）可以根据响应为您创建类型定义。另请参阅：github.com/axios/axios/blob/master/index.d.ts#L146。它返回Promise<R>，默认R 是AxiosResponse<T>。所以await axios.get<T>() 会给你AxiosResponse<T>。

标签： typescript axios next.js

【解决方案1】：

来自 @brc-dd

的解决方案

看官方文档好像没有数据 JSON 中的字段。您必须提供给 axios.get 的类型/接口 (T) 反映在 response.data 中（换句话说，response.data 的类型是 T 不是响应）。

我做错的是在我的类型中包含数据，现在看起来像这样，这对我有用。

interface DataMovieType {
    results: MovieType[]
}

【讨论】：