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

Question

数据已经成功从API返回。这是我第一次使用TypeScript调用API。我遇到的问题是，我不确定我的接口是否成功验证了API数据。

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,
}

- Darron Brown

---

请参考类似问题以在运行时进行类型检查。 - 98sean98

Answer 1

如果你不确定接口中的属性是否有数据，可以使用以下语法：

接口名称 your_interface_name { 属性名称?: 数据类型 }

例如：export interface Geolocation { lat?: string, lng?: string, }

- meowww