打字稿：数字的函数重载决议 |数组缓冲区

Question

在尝试集成时 WebGL2 typings into our project I've encountered a type error which I was able to boil down to the following 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 在本地将其添加到您自己的代码中，一切都会为您服务。

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

打字稿：数字的函数重载决议 |数组缓冲区

Typescript: Function overload resolution for number | ArrayBuffer

typescript

typescript-typings