[js/web] fix typescript type check (#18343)

### Description

This PR fixes the TypeScript type check.

Previously, when I use esbuild to replace webpack (#17745), typescript
typecheck was disabled. This causes a few TypeScript type error checked
in into the code base. This PR fixes the followings:

- Use "Node16" as default "module" value in tsconfig.json, because in
TypeScript v5, `(module == "ES2015" && moduleResolution == "Node16")` is
an invalid combination.
- Set `noUnusedParameters` to true as default. in web override it to
false because multiple code need to be updated ( a following-up PR will
do this )
- set correct project file for 'web/lib/**/*.ts' for ESLint (otherwise
WebGPU types are not populated correctly)
- fix type error in file js/web/lib/wasm/jsep/webgpu/program-manager.ts
- upgrade "@webgpu/types" to latest to fix type error in file
js/web/lib/wasm/jsep/backend-webgpu.ts
- add package script "prebuild" for web to run tsc type check
- add type check in CI yml file

js/.eslintrc.js

@@ -144,7 +144,9 @@ module.exports = {
       'no-unused-expressions': 'off',
     }
   }, {
-    files: ['web/lib/**/*.ts'], rules: {
+    files: ['web/lib/**/*.ts'],
+    excludedFiles: 'web/lib/wasm/proxy-worker/**/*',
+    parserOptions: { 'project': 'web/tsconfig.json' },rules: {
       'no-underscore-dangle': 'off',
     }
   }, {

js/common/tsconfig.json

@@ -4,8 +4,7 @@
     "outDir": "./dist/esm",
     "declaration": true,
     "declarationMap": true,
-    "esModuleInterop": false,
-    "noUnusedParameters": true
+    "esModuleInterop": false
   },
   "include": ["lib"]
 }

js/node/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "module": "Node16",
     "outDir": "dist"
   },
   "include": ["lib"]

js/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "ES2015",
+    "module": "Node16",
     "moduleResolution": "Node16",
     "esModuleInterop": true,
     "target": "ES2020",
@@ -10,7 +10,7 @@
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noUnusedParameters": false,
+    "noUnusedParameters": true,
     "alwaysStrict": true,
     "strictNullChecks": true,
     "pretty": true,

js/tsconfig.tools.json

@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "Node16",
     "declaration": false,
     "sourceMap": false
   }

js/web/lib/build-def.d.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-/* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/naming-convention */
 
 /**
  * The interface BuildDefinitions contains a set of flags which are defined at build time.

js/web/lib/wasm/jsep/webgpu/program-manager.ts

@@ -68,7 +68,7 @@ export class ProgramManager {
           this.backend.querySetCount * 8, GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST);
 
       this.backend.endComputePass();
-      this.backend.getCommandEncoder().resolveQuerySet(this.backend.querySet, 0, 2, this.backend.queryData.buffer, 0);
+      this.backend.getCommandEncoder().resolveQuerySet(this.backend.querySet!, 0, 2, this.backend.queryData.buffer, 0);
       this.backend.getCommandEncoder().copyBufferToBuffer(
           this.backend.queryData.buffer, 0, syncData.buffer, 0, this.backend.querySetCount * 8);
       this.backend.flush();
@@ -77,7 +77,7 @@ export class ProgramManager {
       const kernelInfo = this.backend.kernels.get(kernelId)!;
       const kernelName = `[${kernelInfo[0]}] ${kernelInfo[1]}`;
 
-      syncData.buffer.mapAsync(GPUMapMode.READ).then(() => {
+      void syncData.buffer.mapAsync(GPUMapMode.READ).then(() => {
         const mappedData = new BigUint64Array(syncData.buffer.getMappedRange());
         const startTimeU64 = mappedData[0];
         const endTimeU64 = mappedData[1];

js/web/package-lock.json

@@ -25,7 +25,7 @@
         "@types/minimatch": "^5.1.2",
         "@types/minimist": "^1.2.2",
         "@types/platform": "^1.3.4",
-        "@webgpu/types": "^0.1.30",
+        "@webgpu/types": "^0.1.38",
         "base64-js": "^1.5.1",
         "chai": "^4.3.7",
         "electron": "^23.1.2",
@@ -323,9 +323,9 @@
       }
     },
     "node_modules/@webgpu/types": {
-      "version": "0.1.30",
-      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.30.tgz",
-      "integrity": "sha512-9AXJSmL3MzY8ZL//JjudA//q+2kBRGhLBFpkdGksWIuxrMy81nFrCzj2Am+mbh8WoU6rXmv7cY5E3rdlyru2Qg==",
+      "version": "0.1.38",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.38.tgz",
+      "integrity": "sha512-7LrhVKz2PRh+DD7+S+PVaFd5HxaWQvoMqBbsV9fNJO1pjUs1P8bM2vQVNfk+3URTqbuTI7gkXi0rfsN0IadoBA==",
       "dev": true
     },
     "node_modules/accepts": {
@@ -3767,9 +3767,9 @@
       }
     },
     "@webgpu/types": {
-      "version": "0.1.30",
-      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.30.tgz",
-      "integrity": "sha512-9AXJSmL3MzY8ZL//JjudA//q+2kBRGhLBFpkdGksWIuxrMy81nFrCzj2Am+mbh8WoU6rXmv7cY5E3rdlyru2Qg==",
+      "version": "0.1.38",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.38.tgz",
+      "integrity": "sha512-7LrhVKz2PRh+DD7+S+PVaFd5HxaWQvoMqBbsV9fNJO1pjUs1P8bM2vQVNfk+3URTqbuTI7gkXi0rfsN0IadoBA==",
       "dev": true
     },
     "accepts": {

js/web/package.json

@@ -24,6 +24,7 @@
     "build:doc": "node ./script/generate-webgl-operator-md && node ./script/generate-webgpu-operator-md",
     "pull:wasm": "node ./script/pull-prebuilt-wasm-artifacts",
     "test:e2e": "node ./test/e2e/run",
+    "prebuild": "tsc -p . --noEmit",
     "build": "node ./script/build",
     "test": "tsc --build ../scripts && node ../scripts/prepare-onnx-node-tests && node ./script/test-runner-cli",
     "prepack": "node ./script/build && node ./script/prepack"
@@ -42,7 +43,7 @@
     "@types/minimatch": "^5.1.2",
     "@types/minimist": "^1.2.2",
     "@types/platform": "^1.3.4",
-    "@webgpu/types": "^0.1.30",
+    "@webgpu/types": "^0.1.38",
     "base64-js": "^1.5.1",
     "chai": "^4.3.7",
     "electron": "^23.1.2",

js/web/script/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.tools.json",
   "compilerOptions": {
-    "sourceMap": true
+    "sourceMap": true,
+    "noUnusedParameters": false
   }
 }

js/web/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "module": "Node16",
     "downlevelIteration": true,
     "declaration": true,
+    "noUnusedParameters": false,
     "typeRoots": ["./node_modules/@webgpu/types", "./node_modules/@types", "../node_modules/@types"]
   },
   "include": ["lib", "test"],

tools/ci_build/github/azure-pipelines/templates/linux-web-init-and-check.yml

@@ -3,10 +3,6 @@ steps:
     npm ci
   workingDirectory: '$(Build.SourcesDirectory)/js'
   displayName: 'npm ci /js/'
-- script: |
-    npm run lint
-  workingDirectory: '$(Build.SourcesDirectory)/js'
-  displayName: 'run ESLint without TS type populated'
 - script: |
     npm ci
   workingDirectory: '$(Build.SourcesDirectory)/js/common'
@@ -19,6 +15,10 @@ steps:
     npm ci
   workingDirectory: '$(Build.SourcesDirectory)/js/web'
   displayName: 'npm ci /js/web/'
+- script: |
+    npm run prebuild
+  workingDirectory: '$(Build.SourcesDirectory)/js/web'
+  displayName: 'run TypeScript type check in /js/web/'
 - script: |
     npm run lint
   workingDirectory: '$(Build.SourcesDirectory)/js'

tools/ci_build/github/azure-pipelines/templates/win-web-ci.yml

@@ -99,10 +99,6 @@ jobs:
      npm ci
     workingDirectory: '$(Build.SourcesDirectory)\js'
     displayName: 'npm ci /js/'
-  - script: |
-     npm run lint
-    workingDirectory: '$(Build.SourcesDirectory)\js'
-    displayName: 'run ESLint without TS type populated'
   - script: |
      npm ci
     workingDirectory: '$(Build.SourcesDirectory)\js\common'
@@ -115,6 +111,10 @@ jobs:
      npm ci
     workingDirectory: '$(Build.SourcesDirectory)\js\web'
     displayName: 'npm ci /js/web/'
+  - script: |
+     npm run prebuild
+    workingDirectory: '$(Build.SourcesDirectory)\js\web'
+    displayName: 'run TypeScript type check in /js/web/'
   - script: |
      npm run lint
     workingDirectory: '$(Build.SourcesDirectory)\js'