Compile error with @tensorflow/tfjs-backend-webgl for TS target > ES5

System information

• OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Windows 10
• Mobile device (e.g. iPhone 8, Pixel 2, Samsung Galaxy) if the issue happens on mobile device: -
• TensorFlow.js installed from (npm or script link): npm
• TensorFlow.js version: 2.7.0
• CUDA/cuDNN version: -

Describe the problem When trying to build a typescript code that depends on @tensorflow/tfjs-backend-webgl, if the compilerOptions.target is above ES5 (i.e “ES2015”,“ES2016”,“ES2017”,“ES2018”,“ES2019”,“ES2020” or “ESNext”), you get the following compilation errors:

node_modules/typescript/lib/lib.dom.d.ts:16532:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGL2RenderingContextBase'.
  Types of property 'clearBufferfv' are incompatible.
    Type '(buffer: number, drawbuffer: number, values: ArrayLike<number> | Float32Array, srcOffset?: number) => void' is not assignable to type '{ (buffer: number, drawbuffer: number, values: Float32List, srcOffset?: number): void; (buffer: number, drawbuffer: number, values: Iterable<number>, srcOffset?: number): void; }'.
      Types of parameters 'values' and 'values' are incompatible.
        Type 'Iterable<number>' is not assignable to type 'ArrayLike<number> | Float32Array'.
          Type 'Iterable<number>' is missing the following properties from type 'Float32Array': BYTES_PER_ELEMENT, buffer, byteLength, byteOffset, and 25 more.

16532 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
                ~~~~~~~~~~~~~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:16532:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGL2RenderingContextOverloads'.
  Types of property 'uniform1fv' are incompatible.
    Type '(location: WebGLUniformLocation, data: ArrayLike<number> | Float32Array, srcOffset?: number, srcLength?: number) => void' is not assignable to type '{ (location: WebGLUniformLocation, data: Float32List, srcOffset?: number, srcLength?: number): void; (location: WebGLUniformLocation, data: Iterable<...>, srcOffset?: number, srcLength?: number): void; }'.
      Types of parameters 'data' and 'data' are incompatible.
        Type 'Iterable<number>' is not assignable to type 'ArrayLike<number> | Float32Array'.
          Type 'Iterable<number>' is not assignable to type 'Float32Array'.

16532 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
                ~~~~~~~~~~~~~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:16532:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGLRenderingContext'.
  Types of property 'uniform1fv' are incompatible.
    Type '(location: WebGLUniformLocation, data: ArrayLike<number> | Float32Array, srcOffset?: number, srcLength?: number) => void' is not assignable to type '{ (location: WebGLUniformLocation, v: Float32List): void; (location: WebGLUniformLocation, v: Iterable<number>): void; }'.
      Types of parameters 'data' and 'v' are incompatible.
        Type 'Iterable<number>' is not assignable to type 'ArrayLike<number> | Float32Array'.
          Type 'Iterable<number>' is not assignable to type 'Float32Array'.

16532 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
                ~~~~~~~~~~~~~~~~~~~~~~


Found 3 errors.

Provide the exact sequence of commands / steps that you executed before running into the problem The error is easily reconstructed with the following:

1. package.json:

{
	"name": "tfjs-ts-test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"build": "tsc"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
		"@tensorflow/tfjs-backend-webgl": "^2.7.0",
		"@tensorflow/tfjs-core": "^2.7.0",
		"typescript": "^4.0.5"
	}
}

1. tsconfig.json:

{
	"compilerOptions": {
		"target": "ES2015"
	}
}

1. An empty index.ts
2. npm install
3. npm run build

Any other info / logs This partially relates to https://github.com/tensorflow/tfjs/issues/2007 but not the same issue

[DBachiloVironit]

The errors still occur with the latest version of @tensorflow/tfjs-node and @tensorflow/tfjs-node-gpu.

1. package.json

{
    "name": "tensorflow-test",
    "version": "0.0.1",
    "private": true,
    "description": "",
    "scripts": {
        "build": "./node_modules/typescript/bin/tsc --project ./tsconfig.json",
        "start": "node src/index.js"
    },
    "dependencies": {
        "@tensorflow/tfjs-node": "^3.9.0",
        "long": "^4.0.0",
        "nsfwjs": "^2.4.1"
    },
    "devDependencies": {
        "@types/long": "^4.0.1",
        "@types/node": "^16.10.1",
        "@types/webgl2": "^0.0.6",
        "typescript": "^4.4.3"
    }
}

1. tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "types": [
            "node",
            "long"
        ]
    }
}

The errors are the same as in the first post.

About the `long` module

Note that I also added `long` module and types because otherwise I get these errors:

node_modules/@tensorflow/tfjs-core/dist/hash_util.d.ts:2:49 - error TS2304: Cannot find name 'Long'.

export declare function hexToLong(hex: string): Long;
                                                  ~~~~

node_modules/@tensorflow/tfjs-core/dist/hash_util.d.ts:3:69 - error TS2304: Cannot find name 'Long'.

export declare function fingerPrint64(s: Uint8Array, len?: number): Long;

[google-ml-butler[bot]]

Are you satisfied with the resolution of your issue? Yes No