面试题：TypeScript函数重载与接口结合在大型项目架构中的应用

架构设计思路

接口定义：
- 为不同模块的数据请求和响应分别定义接口。例如，用户模块的请求和响应接口，订单模块的请求和响应接口等。这样可以明确不同模块数据的结构和类型。
- 通用请求参数（如认证信息等）可以提取到一个基础接口中，各模块请求接口继承该基础接口。
函数重载设计：
- 在通用数据请求模块中，使用函数重载定义不同模块的请求函数。每个重载函数接受对应模块的请求参数，并返回对应模块的响应数据类型。
- 函数重载允许在同一个函数名上根据传入参数的类型和数量进行不同的逻辑处理，方便区分不同模块的请求。
处理模块间依赖和数据流转：
- 通过导入通用数据请求模块，各模块可以调用相应的请求函数获取数据。
- 可以使用依赖注入或者模块管理工具（如Webpack等）来管理模块间的依赖关系。
- 在数据流转方面，请求函数获取到数据后，将响应数据传递给调用模块进行进一步处理。

接口定义示例

// 基础请求接口，包含通用参数
interface BaseRequest {
    token: string;
}

// 用户模块请求接口
interface UserRequest extends BaseRequest {
    userId: number;
}

// 用户模块响应接口
interface UserResponse {
    name: string;
    age: number;
}

// 订单模块请求接口
interface OrderRequest extends BaseRequest {
    orderStatus: string;
}

// 订单模块响应接口
interface OrderResponse {
    orderId: string;
    amount: number;
}

函数重载设计示例

// 通用数据请求模块
class DataRequest {
    // 用户模块请求函数重载
    requestData(request: UserRequest): Promise<UserResponse>;
    // 订单模块请求函数重载
    requestData(request: OrderRequest): Promise<OrderResponse>;
    async requestData(request: BaseRequest): Promise<any> {
        // 实际请求逻辑，这里模拟返回数据
        if ('userId' in request) {
            return {name: 'John', age: 30} as UserResponse;
        } else if ('orderStatus' in request) {
            return {orderId: '123', amount: 100} as OrderResponse;
        }
        return null;
    }
}

使用示例

const dataRequest = new DataRequest();

// 用户模块调用
const userRequest: UserRequest = {token: 'abc123', userId: 1};
dataRequest.requestData(userRequest).then((response) => {
    console.log(response.name);
});

// 订单模块调用
const orderRequest: OrderRequest = {token: 'abc123', orderStatus: 'paid'};
dataRequest.requestData(orderRequest).then((response) => {
    console.log(response.orderId);
});

星途面试题库

面试题：TypeScript函数重载与接口结合在大型项目架构中的应用

知识考点

面试题答案

架构设计思路

接口定义示例

函数重载设计示例

使用示例