如何校验后端返回对象是否正确实现User接口？

Great question! Since TypeScript is purely a compile-time type system, it doesn’t retain any type information at runtime. That means you can’t rely on TS alone to verify if the backend’s returned object matches your User interface—you need to add explicit runtime validation. Here are two common, practical approaches:

1. Manual Type Guard Function #

For simple interfaces like User, writing a custom type guard is straightforward and gives you full control over validation logic. This function will check that all required properties exist and have the correct types:

export interface User {
  id: number;
  name: string;
  foo: string;
  bar: string;
}

// Type guard that narrows the input type to User
function isUser(obj: unknown): obj is User {
  // First, ensure we're dealing with a non-null object
  if (typeof obj !== 'object' || obj === null) {
    return false;
  }

  // Cast to User temporarily to inspect properties
  const candidate = obj as User;
  
  // Verify each required property's type
  return (
    typeof candidate.id === 'number' &&
    typeof candidate.name === 'string' &&
    typeof candidate.foo === 'string' &&
    typeof candidate.bar === 'string'
  );
}

// Example usage in a fetch call
async function fetchUser() {
  const response = await fetch('/api/user');
  const rawData = await response.json();

  if (isUser(rawData)) {
    // TypeScript now recognizes rawData as a User here
    console.log(`Fetched user: ${rawData.name} (ID: ${rawData.id})`);
  } else {
    throw new Error('Backend response doesn’t match the expected User format');
  }
}

This works well for small interfaces, but becomes tedious if you have nested types or optional properties to handle.

2. Use a Schema Validation Library #

For scalable validation (especially with complex types), use a library like Zod, io-ts, or Yup. These tools let you define a runtime schema and automatically generate TypeScript types from it, ensuring your validation logic stays in sync with your types.

Here’s a clean example with Zod:

import { z } from 'zod';

// Define a runtime schema first
const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  foo: z.string(),
  bar: z.string(),
});

// Generate the User type directly from the schema (no need to write the interface manually!)
export type User = z.infer<typeof UserSchema>;

// Example usage
async function fetchUser() {
  const response = await fetch('/api/user');
  const rawData = await response.json();

  try {
    // Parse validates the data and returns it as a User type
    const user = UserSchema.parse(rawData);
    console.log(`Fetched user: ${user.name} (ID: ${user.id})`);
  } catch (error) {
    // Zod throws a detailed error explaining exactly what’s wrong
    console.error('Invalid User data from backend:', error);
  }
}

Libraries like Zod also handle edge cases (optional properties, default values, nested objects) out of the box, saving you from writing hundreds of lines of manual checks.

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