如何使用 TypeScript 验证带有 Axios GET 响应的接口

Posted

技术标签:

【中文标题】如何使用 TypeScript 验证带有 Axios GET 响应的接口【英文标题】:How to verify Interface with Axios GET response using TypeScript 【发布时间】:2021-04-06 15:51:52 【问题描述】:

数据正在从 API 成功返回。这是我第一次使用 TypeScript 调用 API。我遇到的问题是我不确定我的界面是否成功验证了 AP​​I 数据。

const App = () => 
  const [userData, setUserData] = useState<User[]>([])
  console.log('User data: ', userData);

  useEffect(() => 
    axios
      .get<User[]>('https://jsonplaceholder.typicode.com/users')
      .then((response) => 
        setUserData(response.data)
      )
      .catch(error => console.log(error.message))
  , [])

  return ...
;

export default App;

这是我的界面

export interface User 
  id: number,
  name: string,
  username: string,
  email: string,
  address: Address,
  phone: string,
  website: string,
  company: Company,


export interface Address 
  street: string,
  suite: string,
  city: string,
  zipcode: string,
  geo: Geolocation,


export interface Geolocation 
  lat: string,
  lng: string,


export interface Company 
  name: string,
  catchPhrase: string,
  bs: string,


【问题讨论】:

请参阅similar issue 以了解运行时的类型检查。 【参考方案1】:

如果您不确定界面中的道具是否有数据。你可以使用这个语法 接口 your_interface_name your_props_name?: type_data

例如:export interface Geolocation lat?: string, lng?: string,

【讨论】:

以上是关于如何使用 TypeScript 验证带有 Axios GET 响应的接口的主要内容,如果未能解决你的问题,请参考以下文章

如何在带有 Typescript 项目的 React Native 中使用 AWS Amplify?

如何使用 Axios 使用经过身份验证的 API

如何使用 jwt 在 typescript 中实现更改密码 API?

如何在带有 React 的 Typescript/JSX 中使用带有箭头函数的泛型?

如何正确使用带有 typescript 的 createAsyncThunk 函数?

如何使用带有 Typescript 的 React Hook 表单(输入组件)