TypeScript报错：Property 'data'不存在于ResponseModel类型

问题场景 #

你定义了以下TypeScript接口与类：

export interface IResponseModel {
    hasError: boolean;
    message: string;
    statusCode: number;
    status: string;
}
export interface IDataResponseModel<T> extends IResponseModel {
    data?: T;
}
export interface StringResponseModel extends IDataResponseModel<string> {}
export class ErrorResponseModel implements IResponseModel {
    hasError: boolean;
    message: string;
    statusCode: number;
    status: string;
    constructor(message: string, statusCode: number, status: string = 'error') {
        this.hasError = true;
        this.message = message;
        this.statusCode = statusCode;
        this.status = status;
    }
}
export class ErrorObjectResponseModel extends ErrorResponseModel implements IDataResponseModel<any> {
    data?: any;
    constructor(message: string, statusCode: number, status: string = 'error', data?: any) {
        super(message, statusCode, status);
        this.data = data;
    }
}
export declare type ResponseModel =
    | ErrorObjectResponseModel
    | IResponseModel
    | ErrorResponseModel
    | StringResponseModel
    | IDataResponseModel<any>;

随后有一个返回ResponseModel类型的方法：

import type { ResponseModel } from '@/models/api/response/commons';
async function get(): Promise<ResponseModel>
{
    // 业务代码
}

在处理返回结果时，遇到报错：

Property 'data' does not exist on type 'ResponseModel'.
Property 'data' does not exist on type 'IResponseModel'.

解决方案 #

1. 自定义类型守卫（推荐，类型安全） #

通过自定义类型守卫，在运行时判断当前响应是否包含data属性，让TypeScript在编译时识别出可访问data的类型：

// 定义类型守卫函数
function hasData(response: ResponseModel): response is IDataResponseModel<any> {
    return 'data' in response;
}

// 使用示例
async function handleResponse() {
    const response = await get();
    if (hasData(response)) {
        // 此处TypeScript会识别response为带有data属性的类型，可安全访问
        console.log(response.data);
    } else {
        // 处理不带data的响应
        console.log(response.message);
    }
}

2. 类型断言（快速解决，但需确保类型正确性） #

如果你能确定当前返回的响应一定包含data属性，可以使用类型断言强制转换类型：

async function handleResponse() {
    const response = await get();
    // 断言为IDataResponseModel<any>类型
    const data = (response as IDataResponseModel<any>).data;
    console.log(data);
}

注意：这种方式跳过了TypeScript的类型检查，如果实际响应没有data属性，运行时可能会出现未定义错误，仅在你能100%确定类型时使用。

3. 优化ResponseModel类型定义 #

如果你的业务场景中，所有接口响应都应该携带data（或可选携带），可以调整ResponseModel的类型，剔除不带data的类型：

export declare type ResponseModel =
    | ErrorObjectResponseModel
    | StringResponseModel
    | IDataResponseModel<any>;

或者修改基础接口IResponseModel，让data成为可选属性（如果符合业务逻辑）：

export interface IResponseModel {
    hasError: boolean;
    message: string;
    statusCode: number;
    status: string;
    data?: any; // 添加可选的data属性
}

这样所有继承或实现IResponseModel的类型都会自动拥有data属性，无需额外判断。

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