Axios+TypeScript：POST返回属性名不匹配时无报错问题排查

一、为啥没报错？ #

• TypeScript是编译时类型系统，编译完成后所有类型信息会被彻底擦除，完全不会干涉运行时行为。
• Axios里的<Article[]>只是类型断言——相当于你告诉TypeScript“放心，返回的数据就是这个类型”，但它完全不会在运行时真的去校验接口返回的结构。
• 后端返回transTitle/articleText时，TypeScript编译阶段根本没法知道后端实际返回了啥，所以不会抛编译错误；运行时因为类型信息已经没了，自然也不会自动校验。

二、怎么重构才能捕获类型不匹配？ #

要实现真正的类型校验，必须加运行时校验逻辑，常用两种方案：

1. 手动写类型校验函数 #

针对Article类型写一个校验函数，拿到接口数据后先检查：

export type Article = {
    id: string;
    date: string;
    trans_title: string;
    article_text: string;
}

// 运行时校验单个Article
function isArticle(obj: unknown): obj is Article {
    if (typeof obj !== 'object' || obj === null) return false;
    const article = obj as Article;
    return (
        typeof article.id === 'string' &&
        typeof article.date === 'string' &&
        typeof article.trans_title === 'string' &&
        typeof article.article_text === 'string'
    );
}

// 校验Article数组
function isArticleArray(arr: unknown): arr is Article[] {
    if (!Array.isArray(arr)) return false;
    return arr.every(item => isArticle(item));
}

调用API后用这个函数校验：

const resp = await axios.post('/api/articles', filterObj, {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + (await this.getAccessToken()).token
    }
});

if (!isArticleArray(resp.data)) {
    throw new Error('API返回数据结构不符合要求');
}

// 到这里resp.data就会被TS正确识别为Article[]类型

2. 用Schema校验库（比如Zod） #

如果类型结构复杂，手动写校验太麻烦，用Zod这类库可以同时生成编译时类型和运行时校验逻辑：

import { z } from 'zod';

// 定义Zod Schema
const ArticleSchema = z.object({
    id: z.string(),
    date: z.string(),
    trans_title: z.string(),
    article_text: z.string()
});

// 自动生成TS类型
type Article = z.infer<typeof ArticleSchema>;

// 数组Schema
const ArticleArraySchema = z.array(ArticleSchema);

调用API后校验：

const resp = await axios.post('/api/articles', filterObj, {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + (await this.getAccessToken()).token
    }
});

// 校验数据，不符合就直接抛错
const articles = ArticleArraySchema.parse(resp.data);
// articles是严格符合Article[]的安全数据

额外优化：封装Axios实例 #

把校验逻辑封装到Axios拦截器里，不用每个请求都写重复代码：

import axios from 'axios';
import { ZodSchema } from 'zod';

const apiClient = axios.create({
    baseURL: '/api',
    headers: { 'Content-Type': 'application/json' }
});

// 响应拦截器：自动校验数据
apiClient.interceptors.response.use(
    (response) => {
        // 如果请求时传了Schema，就自动校验
        const schema = response.config.validateSchema as ZodSchema | undefined;
        if (schema) {
            response.data = schema.parse(response.data);
        }
        return response;
    },
    (error) => Promise.reject(error)
);

// 使用时传入Schema即可
const resp = await apiClient.post('/articles', filterObj, {
    headers: { 'Authorization': 'Bearer ' + (await this.getAccessToken()).token },
    validateSchema: ArticleArraySchema
});

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