typescript :数字的函数重载决议 |数组缓冲区

Question

尝试整合 WebGL2 typings在我们的项目中，我遇到了一个类型错误，我可以将其归结为以下 snippet :

interface WebGL2RenderingContext {
  bufferData(target: number, size: number, usage: number): void;
  bufferData(target: number, srcData: ArrayBuffer, usage: number): void;
}

function test(gl: WebGL2RenderingContext, sizeOrData: number|ArrayBuffer){
  gl.bufferData(0, sizeOrData, 0);
}

这会导致以下编译错误:

Argument of type 'number | ArrayBuffer' is not assignable to parameter of type 'ArrayBuffer'. Type 'number' is not assignable to type 'ArrayBuffer'.

据我所知，这应该是有效的代码，但我不完全确定我是否遇到了 TS 中的错误、错误的输入或者错误是否在我这边。有什么建议吗？

Answer 1

发生这种情况是因为 overloads do not resolve based on union types .两个重载都不匹配第二个参数的 number|ArrayBuffer 类型，并且编译器不理解这对重载可以合并。目前还没有立即解决这个问题的计划，尽管它被认为是一个痛点。

这意味着 bufferData() 的 WebGL2 类型并不完全不正确，但也不是很好。 TypeScript 手册“Do's and Don'ts”页面特别将此列为 "Don't" .由于签名仅在一个参数的类型上有所不同，因此最好使用联合类型，如下所示:

interface WebGL2RenderingContext {
  bufferData(target: number, sizeOrData: number | ArrayBuffer, usage: number): void;
}

那么您的代码就不会抛出错误。代替将此定义返回上游，您可以通过 declaration merging 在本地将其添加到您自己的代码中。一切都会为您服务。

希望对您有所帮助；祝你好运!