面试题：TypeScript函数重载在复杂业务场景中的应用

Question

假设你正在开发一个图片加载的前端功能，有一个 `loadImage` 函数。它可以接受一个字符串类型的图片URL直接加载图片；也可以接受一个包含 `url`（图片URL）、`width`（图片宽度）、`height`（图片高度）属性的对象来加载并指定尺寸的图片；还可以接受一个图片URL和一个回调函数，在图片加载完成后执行回调。请使用TypeScript的函数重载来实现这个 `loadImage` 函数，并说明这样做的好处。

Answer 1

function loadImage(url: string): Promise<HTMLImageElement>;
function loadImage(options: { url: string; width: number; height: number }): Promise<HTMLImageElement>;
function loadImage(url: string, callback: (image: HTMLImageElement) => void): void;
function loadImage(arg1: string | { url: string; width: number; height: number }, arg2?: (image: HTMLImageElement) => void): Promise<HTMLImageElement> | void {
    if (typeof arg1 === 'string') {
        if (typeof arg2 === 'function') {
            const img = new Image();
            img.onload = () => arg2(img);
            img.src = arg1;
        } else {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => resolve(img);
                img.onerror = reject;
                img.src = arg1;
            });
        }
    } else {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.width = arg1.width;
            img.height = arg1.height;
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = arg1.url;
        });
    }
}

这样做的好处

1. 代码可读性增强：通过函数重载，清晰地定义了不同参数组合下函数的行为，其他开发者能够直观地了解该函数的使用方式，即使不深入阅读函数实现，也能知道在传入不同类型参数时函数应该如何工作。
2. 类型安全：TypeScript会在编译时根据传入的参数类型检查调用是否正确，比如传入错误类型参数或者参数个数不对时，编译器会报错，减少运行时错误。
3. 灵活性：支持多种调用方式，满足不同场景的需求，如简单加载图片、加载并指定尺寸图片、加载并在完成后执行回调等，而无需为每种场景定义不同的函数，保持代码简洁。