如何使用 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。我遇到的问题是我不确定我的界面是否成功验证了 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,
【问题讨论】:
请参阅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?
如何使用 jwt 在 typescript 中实现更改密码 API?
如何在带有 React 的 Typescript/JSX 中使用带有箭头函数的泛型?