TypeScript 函数重载:多参数与单参数的优雅兼容

我们经常会遇到一种情况,即一个函数需要接收多个参数。然而,随着参数数量的增多,函数的调用和维护都会变得越来越复杂,可读性也会大大降低。那么,有没有一种方法可以同时保持函数的灵活性和可读性呢?

答案是肯定的。在 TypeScript 中,我们可以利用函数重载和高级类型来实现这个目标。具体来说,我们可以设计一个函数,既可以接收一个包含所有参数的对象,也可以接收一系列独立的参数。这样,我们就可以根据实际需求选择最适合的调用方式。

场景分析

首先,让我们看一下初始的函数定义:

typescript 复制代码
export default class OpenAI {
    static async request(
        messages: message[],
        onFinish: (responseText: string, cancel?: boolean) => any,
        onUpdate?: (responseText: string, delta: string) => any,
        onError?: (e: Error) => any,
        functions?: any[],
        closeFn?: MutableRefObject<any>,
        function_call?: any,
        stream: boolean = true,
        extra: {
            model?: string;
            temperature?: number;
            frequency_penalty?: number;
            presence_penalty?: number;
        } = {}
    ) {}
}

这是一个非常典型的多参数函数。它需要接收多个参数,包括 messagesonFinish 等。虽然这样的设计可以提供很大的灵活性,但是随着参数数量的增多,函数调用的复杂性也会增加。例如,当我们需要改变 stream 的值时,我们需要提供所有前面的参数,即使这些参数的值并没有改变。这就导致了代码的冗余,也增加了出错的可能性。

优化方案

为了解决这个问题,我们可以利用 TypeScript 的函数重载和高级类型来设计一个新的函数。这个函数既可以接收一个包含所有参数的对象,也可以接收一系列独立的参数。这样,我们就可以根据实际需求选择最适合的调用方式。

首先,我们定义了一个 RequestOptions 接口,它将所有的参数整合在一个对象中。这样,我们就可以通过传递一个对象来调用函数,而不是传递一系列的参数。这极大地提高了代码的可读性和维护性。

typescript 复制代码
interface RequestExtraOptions {
    model?: string;
    temperature?: number;
    frequency_penalty?: number;
    presence_penalty?: number;
}

interface RequestOptions {
    messages: message[];
    onFinish: (responseText: string, cancel?: boolean) => any;
    onUpdate?: (responseText: string, delta: string) => any;
    onError?: (e: Error) => any;
    functions?: any[];
    closeFn?: MutableRefObject<any>;
    function_call?: any;
    stream?: boolean;
    extra?: RequestExtraOptions;
}

然后,我们定义了一个 MultiRequest 类型,它表示多参数形式的函数。这个类型是一个函数类型,它的参数类型和 RequestOptions 接口中的字段类型一一对应。

typescript 复制代码
type MultiRequest = (
    messages: RequestOptions['messages'],
    onFinish: RequestOptions['onFinish'],
    onUpdate?: RequestOptions['onUpdate'],
    onError?: RequestOptions['onError'],
    functions?: RequestOptions['functions'],
    closeFn?: RequestOptions['closeFn'],
    function_call?: RequestOptions['function_call'],
    stream?: RequestOptions['stream'],
    extra?: RequestOptions['extra']
) => Promise<void>;

接下来,我们定义了一个 isRequestOptionsArr 类型守卫函数,它用来判断传入的参数是否为 RequestOptions 类型的数组。这个函数的返回值是一个类型谓词,它告诉 TypeScript 编译器 args 参数的实际类型。

typescript 复制代码
function isRequestOptionsArr(
    args: [RequestOptions] | Parameters<MultiRequest>
): args is [RequestOptions] {
    return args.length === 1 && typeof args[0] === 'object' && !Array.isArray(args[0]);
}

最后,我们定义了一个新的 request 函数。这个函数接收一个参数数组,然后根据参数的形式分别处理。如果参数是 RequestOptions 类型的数组,我们就直接将其赋值给 options 对象。否则,我们就将参数解构并赋值给 options 对象。

typescript 复制代码
export default class OpenAI {
    static async request(...args: [RequestOptions] | Parameters<MultiRequest>): Promise<void> {
        let options: RequestOptions;

        if (isRequestOptionsArr(args)) {
            // 单参数形式
            options = args[0] as RequestOptions;
        } else {
            // 多参数形式
            options = {
                messages: args[0],
                onFinish: args[1],
                onUpdate: args[2],
                onError: args[3],
                functions: args[4],
                closeFn: args[5],
                function_call: args[6],
                stream: args[7],
                extra: args[8],
            };
        }
        const {
            messages,
            onFinish,
            onUpdate,
            onError,
            functions,
            closeFn,
            function_call,
            stream = true,
            extra = {},
        } = options;
    }
}

这样,我们就实现了一个既可以接收一个包含所有参数的对象,也可以接收一系列独立的参数的函数。这种设计使得函数调用更加灵活和简洁,提供了更好的用户体验和代码可维护性。

结论

通过上述分析,我们可以看出,TypeScript 的函数重载和高级类型为我们提供了一种优雅的解决方案。它们可以使我们的代码更加灵活、易读和可维护。所以,当我们在编程中遇到类似的问题时,不妨尝试使用这种方法来优化我们的代码。

相关推荐
飞翔的佩奇11 分钟前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15881 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追1 小时前
Vue组件化开发
前端·html
艾德金的溪2 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30733 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园3 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7274 小时前
解除chrome中http无法录音问题,权限
前端·chrome