vue3+ts,想在axios中对请求和响应的数据做interface或者type验证，如下图和代码，请问要怎么修改

Question

payload

res 响应

interface

//请求
export interface TopicsPayloadProps {
  page: number
  tab?: string
  limit?: number
  mdrender?: string
}

//响应
export interface TopicsProps {
  author_id: string
  content: string
  author: AuthorProps
}

export interface AuthorProps {
  avatar_url: string
  loginname: string
}

代码

import { TopicsPayloadProps, TopicsProps } from '../interface/index'

    const state = reactive({
      topics: [] as TopicsProps[]
    })
    const getData = () => {
      const payload: TopicsPayloadProps = {
        page: 1
      }
      axios
        .get('/topics', {
          params: payload
        })
        .then(res => {
          state.topics = res.data.data
        })
        .catch(err => {
          console.log('err', err)
        })
    }

Answer 1

好像你的接口还有一层，可以单独定义，或者直接在get上标注返回值类型就行了，如下

直接声明在get上

axios.get<{data: TopicsProps[], success: boolean}>('/topics', {
  params: payload
})

单独定义

// interface
interface BaseResp<T>{
  success: boolean;
  data: T
}

// request

axios.get<BaseResp<TopicsProps[]>>('/topics', {
  params: payload
})