在 TypeScript 中重载联合类型

Question

我想定义一个函数f，使得参数和返回类型是联合类型，但它们是绑定的，即当您调用f(anInputType) 时，您会得到aCorrespondingOutputType。我尝试了以下方法，它似乎适用于 TypeScript 4.1.3。

class Input1 {
    type1Input: string = "I am type 1!";
}

class Input2 {
    type2Input: string = "I am type 2!";
}

interface Output1 {
    type1Output: string;
}

interface Output2 {
    type2Output: string;
}

export type Input = Input1 | Input2;
export type Output = Output1 | Output2;

function f(_input: Input1): Output1;
function f(_input: Input2): Output2;
function f(_input: Input): Output {
    return null as any as Output;
}

const input = new Input2();

const output = f(input);
output.type2Output // Compiles because the compiler can figure out that output is of type Output2

但是，在（我的）现实生活中，输入应该是 WebGL 对象。同样的事情，我将Input1 替换为WebGLTexture 和Input2 替换为WebGLBuffer，无法编译。

interface Output1 {
    type1Output: string;
}

interface Output2 {
    type2Output: string;
}

export type Output = Output1 | Output2;

function f(_input: WebGLTexture): Output1;
function f(_input: WebGLBuffer): Output2;
function f(_input: WebGLTexture | WebGLBuffer): Output {
    return null as any as Output;
}

const canvas = document.createElement("canvas")!;
const gl = canvas.getContext("webgl")!;
const input = gl.createBuffer()!;

const output = f(input);
output.type2Output // Does not compile because the compiler thinks that output is of type Output1

我错过了什么吗？

我正在阅读这些 TypeScript 问题：

• https://github.com/Microsoft/TypeScript/issues/27131
• https://github.com/microsoft/TypeScript/issues/14107

以及这些其他问题：

• Typescript overloading functions with union types
• Typescript function overloads not working for the union type case

但令我困扰的是使用现有类型（即 WebGL 对象）与自定义类的行为之间的差异。

其实我是采用Alex的想法

它看起来很冗长，但有了它我可以摆脱一个单一的实现。由于应用程序其他部分的组织方式，这对我来说有点失败。 某事，某处，会看起来很丑。但这现在很好！谢谢！

下面的真实代码。

export type WebGLResource =
  { texture: WebGLTexture } |
  { buffer: WebGLBuffer } |
  { program: WebGLProgram } |
  { renderbuffer: WebGLRenderbuffer } |
  { framebuffer: WebGLFramebuffer };
export type ResourceMeta = TextureMeta | BufferMeta | ProgramMeta | RenderbufferMeta | FramebufferMeta;

function getMeta(<...omitted params...> resource: { texture: WebGLTexture }, required: true): TextureMeta;
function getMeta(<...omitted params...> resource: { buffer: WebGLBuffer }, required: true): BufferMeta;
function getMeta(<...omitted params...> resource: { program: WebGLProgram }, required: true): ProgramMeta;
function getMeta(<...omitted params...> resource: { renderbuffer: WebGLRenderbuffer }, required: true): RenderbufferMeta;
function getMeta(<...omitted params...> resource: { framebuffer: WebGLFramebuffer }, required: true): FramebufferMeta;
function getMeta(<...omitted params...> resource: { texture: WebGLTexture }, required: false): TextureMeta | null;
function getMeta(<...omitted params...> resource: { texture: WebGLBuffer }, required: false): BufferMeta | null;
function getMeta(<...omitted params...> resource: { buffer: WebGLProgram }, required: false): ProgramMeta | null;
function getMeta(<...omitted params...> resource: { renderbuffer: WebGLRenderbuffer }, required: false): RenderbufferMeta | null;
function getMeta(<...omitted params...> resource: { framebuffer: WebGLFramebuffer }, required: false): FramebufferMeta | null;
function getMeta(<...omitted params...> resource: WebGLResource, required: boolean): ResourceMeta | null {
  ...
}

Answer 1

Typescript 是结构性的，而不是名义上的。这意味着如果两种类型具有相同的形状，但名称不同，则它们被认为是相同的类型。不幸的是，WebGLTexture 和 WebGLBuffer 的形状似乎相同。

如果您在 VSCode 或 typescript playground 中 cmd+click（或 ctrl+click）这些类型中的任何一种，您可以看到它们是如何声明的。这产生了这两个声明：

interface WebGLTexture extends WebGLObject {}
interface WebGLBuffer extends WebGLObject {}

遗憾的是，这两种类型都被简单地声明为未更改的WebGLObjects。 Typescript 无法区分它们。因此，当您尝试触发第二个函数重载时，typescript 会注意到第一个重载匹配，并使用它。

很难从这个人为的代码中找到更好的解决方案，但您可能会想要一种不同的方法。

---

也许您可以改为接受一个带有键的对象，以明确您传入的内容？这样不同的重载并有不同的参数类型。

function f(_input: { texture: WebGLTexture }): Output1;
function f(_input: { buffer: WebGLBuffer }): Output2;
function f(_input: { texture?: WebGLTexture, buffer?: WebGLBuffer }): Output {
    return null as any as Output;
}

const canvas = document.createElement("canvas")!;
const gl = canvas.getContext("webgl")!;

const buffer = gl.createBuffer()!;
const texture = gl.createTexture()!;

f({ texture }).type1Output; // works
f({ buffer }).type2Output; // works

Playground