如何使用TypeScript验证Axios GET返回数据与Interface的匹配性

Hey there! Great job getting your first TypeScript API call up and running—seeing that data come back is always satisfying. Let’s break down your question about whether your interfaces are validating the API response.

First, a key point to understand: TypeScript interfaces only enforce type checks at compile time. When your code runs in the browser, all TypeScript type information is stripped away. That means right now, even if the API returned data that didn’t match your User interface (like a missing email field or a lat value that’s a number instead of a string), TypeScript wouldn’t catch it at runtime—it would just let the mismatched data into your userData state.

So your interfaces are helping you write type-safe code during development (catching typos or wrong field types in your components), but they aren’t validating the actual API response when your app runs.

How to Actually Validate API Responses #

If you want to ensure the API data matches your expected structure at runtime, you have two solid options:

1. Write Manual Validation Functions

You can create type guard functions that check each field of the API response to confirm it matches your interfaces. Here’s how you’d implement this for your User structure:

// Add these validation functions to your interface file
function isGeolocation(obj: unknown): obj is Geolocation {
  return (
    typeof obj === 'object' && obj !== null &&
    typeof (obj as Geolocation).lat === 'string' &&
    typeof (obj as Geolocation).lng === 'string'
  );
}

function isAddress(obj: unknown): obj is Address {
  return (
    typeof obj === 'object' && obj !== null &&
    typeof (obj as Address).street === 'string' &&
    typeof (obj as Address).suite === 'string' &&
    typeof (obj as Address).city === 'string' &&
    typeof (obj as Address).zipcode === 'string' &&
    isGeolocation((obj as Address).geo)
  );
}

function isCompany(obj: unknown): obj is Company {
  return (
    typeof obj === 'object' && obj !== null &&
    typeof (obj as Company).name === 'string' &&
    typeof (obj as Company).catchPhrase === 'string' &&
    typeof (obj as Company).bs === 'string'
  );
}

function isUser(obj: unknown): obj is User {
  return (
    typeof obj === 'object' && obj !== null &&
    typeof (obj as User).id === 'number' &&
    typeof (obj as User).name === 'string' &&
    typeof (obj as User).username === 'string' &&
    typeof (obj as User).email === 'string' &&
    isAddress((obj as User).address) &&
    typeof (obj as User).phone === 'string' &&
    typeof (obj as User).website === 'string' &&
    isCompany((obj as User).company)
  );
}

Then update your API call to use these guards:

const App = () => {
  const [userData, setUserData] = useState<User[]>([])
  
  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        // Filter and validate each user in the response
        const validUsers = response.data.filter(isUser);
        
        if (validUsers.length === response.data.length) {
          setUserData(validUsers);
        } else {
          console.error('Some users from the API don\'t match the expected structure');
        }
      })
      .catch(error => console.log(error.message))
  }, [])
  
  return ...
};
export default App;

2. Use a Runtime Validation Library

For larger projects, manual validation can get tedious. Libraries like Zod or io-ts let you define schemas that work for both runtime validation and TypeScript type generation (so you don’t have to duplicate your interface definitions).

Here’s a quick example with Zod:

import { z } from 'zod';

// Define your schema
const GeolocationSchema = z.object({
  lat: z.string(),
  lng: z.string(),
});

const AddressSchema = z.object({
  street: z.string(),
  suite: z.string(),
  city: z.string(),
  zipcode: z.string(),
  geo: GeolocationSchema,
});

const CompanySchema = z.object({
  name: z.string(),
  catchPhrase: z.string(),
  bs: z.string(),
});

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  username: z.string(),
  email: z.string(),
  address: AddressSchema,
  phone: z.string(),
  website: z.string(),
  company: CompanySchema,
});

// Generate your TypeScript type from the schema
type User = z.infer<typeof UserSchema>;

Then use it in your API call:

const App = () => {
  const [userData, setUserData] = useState<User[]>([])
  
  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        // Validate the entire array against the schema
        const validationResult = z.array(UserSchema).safeParse(response.data);
        
        if (validationResult.success) {
          setUserData(validationResult.data);
        } else {
          console.error('API response failed validation:', validationResult.error);
        }
      })
      .catch(error => console.log(error.message))
  }, [])
  
  return ...
};
export default App;

Wrap-Up #

Your current interfaces are great for compile-time safety, but they don’t validate real-world API data. To add that runtime check, either write manual type guards or use a library like Zod. Both approaches will give you confidence that the data in your app matches the structure you expect.

内容的提问来源于stack exchange，提问作者Darron Brown