Conflict between pxtlib USB Type Declaration and @types/w3c-web-usb dependency in dapjs

I experienced a TypeScript compilation error when using dapjs as a dependency for the STeaMi Makecode editor built with pxt.

The issue appears to be a conflict in the declaration of the usb property in the Navigator interface between pxtlib/webusb.ts and @types/w3c-web-usb, which is used by dapjs.

Seems related to the modification introduced by PR #10146.

Here are the details:

Error Description

When compiling my project, I got the following errors:

../node_modules/@types/w3c-web-usb/index.d.ts:171:14 - error TS2687: All declarations of 'usb' must have identical modifiers.

171     readonly usb: USB;
                 ~~~

../node_modules/@types/w3c-web-usb/index.d.ts:171:14 - error TS2717: Subsequent property declarations must have the same type. Property 'usb' must be of type '{ getDevices(): Promise<USBDevice[]>; requestDevice(options?: USBDeviceRequestOptions): Promise<USBDevice>; addEventListener(type: "connect" | "disconnect", listener: (ev: USBConnectionEvent) => any, useCapture?: boolean): void; removeEventListener(type: "connect" | "disconnect", callback: (ev: USBConnectionEvent) =...', but here has type 'USB'.

171     readonly usb: USB;
                 ~~~

  ../../pxt/built/pxtlib.d.ts:3379:14
    3379     readonly usb?: {
                      ~~~
    'usb' was also declared here.

../../pxt/built/pxtlib.d.ts:3379:14 - error TS2687: All declarations of 'usb' must have identical modifiers.

3379     readonly usb?: {
                  ~~~

Context

• The compilation issue is caused by a conflict in the type declarations of the usb property in the Navigator interface.

• In pxtlib.d.ts (generated from pxt), we have the following declaration:

  interface Navigator {
      readonly usb?: {
          getDevices(): Promise<pxt.usb.USBDevice[]>;
          requestDevice(options?: pxt.usb.USBDeviceRequestOptions): Promise<pxt.usb.USBDevice>;
          addEventListener(
              type: "connect" | "disconnect",
              listener: (ev: pxt.usb.USBConnectionEvent) => any,
              useCapture?: boolean,
          ): void;
          removeEventListener(
              type: "connect" | "disconnect",
              callback: (ev: pxt.usb.USBConnectionEvent) => any,
              useCapture?: boolean,
          ): void;
      }
  }
  

• Meanwhile, @types/w3c-web-usb defines:

  interface Navigator {
      readonly usb: USB;
  }
  declare class USB extends EventTarget {
  ...
  

• The discrepancy arises from:

  • The usb property is optional (usb?:) in pxtlib.d.ts, while it is defined as non-optional (usb: USB) in @types/w3c-web-usb.
  • The type definitions themselves are incompatible (USB vs a custom structure).

Impact

This conflict prevents projects that rely on both pxt and dapjs from compiling correctly. On the microbit editor, dapjs is directly inside the repo but it's not my favorite option, even if it could be a temporary workaround solution.

Please let me know if there are any planned changes or recommendations on how best to proceed.

Thank you for your time to read.

Start with pxtlib/webusb.ts and the generated built/pxtlib.d.ts declaration, then compare them with @types/w3c-web-usb/index.d.ts around Navigator.usb. Reproduce the TypeScript compilation using both pxt and dapjs; done means the conflicting declarations no longer prevent the project from compiling.