Typescript 定义文件交集类型函数签名

Question

我偶然发现了一个带有一些交集类型函数签名的打字稿定义文件。它们来自文件index.d.ts中的@types/cropppie：

result(options: ResultOptions & { type: 'base64' }): Promise<string>;
result(options: ResultOptions & { type: 'html' }): Promise<HTMLElement>;
result(options: ResultOptions & { type: 'blob' }): Promise<Blob>;
result(options: ResultOptions & { type: 'canvas' }): Promise<HTMLCanvasElement>;
result(options?: ResultOptions): Promise<HTMLCanvasElement>;

我无法使用type: 'base64' 调用函数result，因此打字稿编译器将返回值正确识别为Promise<string>。

当被调用时

const opts = new ResultOptions(...);
result({...opts, ...{type: 'base64'}}).then(data => ...);

typescript 编译器将data 识别为HTMLCanvasElement，但确实是一个base64 编码的字符串。

有人能指出如何正确传递参数，以便打字稿编译器将data 识别为字符串吗？

非常感谢。

Answer 1

我猜这个问题与传递给结果函数的参数的准备方式有关。我已经改变了一些准备工作，看起来你提到的代码开始工作了。而不是：

{...opts, ...{type: 'base64'}}

我写道：

{ ...opts, type: 'base64' }

您可以在Playground site 上查看我的示例。

这是示例的完整代码：

class ResultOptions {
    param1: any;
}

class ClassA {
    result(options: ResultOptions & { type: 'base64' }): Promise<string>;
    result(options: ResultOptions & { type: 'html' }): Promise<HTMLElement>;
    result(options: ResultOptions & { type: 'blob' }): Promise<Blob>;
    result(options: ResultOptions & { type: 'canvas' }): Promise<HTMLCanvasElement>;
    result(options?: ResultOptions): Promise<HTMLCanvasElement>;
    result(options?: ResultOptions): Promise<any> {
        if ((options as any).type === "base64") {
            return new Promise<string>(
                (resolve) => {
                    resolve("some string");
                }
            );

        } else {
            return new Promise<any>(
                (resolve) => {
                    resolve({});
                }
            );
        }
    }
}

const opts = new ResultOptions();
const instanceA = new ClassA();
instanceA.result({ ...opts, type: 'base64' })
    .then(
        (data: string) => {
            alert("data(string): " + data);
        }
    );

instanceA.result(opts)
    .then(
        (data: any) => {
            alert("data(any): " + data);
        }
    );