Documentation example doesn't work with TypeScript

[filipw01]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 14 or higher

Browsers

No response

Reproduction repository

https://stackblitz.com/edit/node-ifch93?file=index.ts

Reproduction steps

Use documentation example with typescript https://mswjs.io/docs/getting-started/integrate/browser#configure-worker

// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

Current behavior

Typescript throws multiple
TS4094: Property 'SOMETHING' of exported class expression may not be private or protected.

Expected behavior

I expect typescript to be fine with that

[gduliscouet-ubitransport]

I have the same issue (with typescript 4.7.4).

Here is an explaination of the warning from microsoft/TypeScript#30355:

"Exported anonymous classes can't have private or protected members if declaration emit is enabled, because there's no way to represent that in a .d.ts file"

I'm trying this workaround in the meanwhile, taken from here (not sure I'm doing it well, I didn't check everything)

import { setupWorker, type SetupWorkerApi } from 'msw'
import { handlers } from './handlers'

type SetupWorkerApiWithoutPrivate = Omit<SetupWorkerApi, never>

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers) as SetupWorkerApiWithoutPrivate

[kettanaito]

I'm not sure how this is related to MSW as we don't emit anonymous classes. You can see that the SetupServerApi class is named:

• built
• source:
  

  msw/src/node/SetupServerApi.ts

  Line 31 in 2553156

  export class SetupServerApi extends SetupApi<ServerLifecycleEventsMap> {

This must be something else. The library builds without issues for me on TS 4.8 but I haven't used it in an example project to verify the consumer's side.

[gduliscouet-ubitransport]

You are right, the issue I shared is talking about an "anonymous class". But here you can see the same TS error with a named class: microsoft/TypeScript#17293.

From what I understand, you should be able to do that, but you cannot due to some limitations in the declaration file creation. See this issue regrouping all the issues with .d.ts declaration files: microsoft/TypeScript#35822.

From what I see, the only solution seems to not use private yet in a typescript lib, or apply some workaround on the exported types :/

You can launch the repro of @filipw01 to see the error on consumer side: https://stackblitz.com/edit/node-ifch93?file=index.ts

[andykenward]

@gduliscouet-ubitransport Adding the type annotation to the worker constant instead of using TypeScript inference allows me to output the definition file without errors.

import { setupWorker, type SetupWorkerApi } from 'msw';

export const worker:SetupWorkerApi = setupWorker(...[]);

[gduliscouet-ubitransport]

I confrim ! Thank you @andykenward for sharing.

In fact I realised that:

• the SetupWorkerApi that is used to define the return of setupWorker comes from index.d.ts and is a class with private members
• the SetupWorkerApi that we import comes from SetupApi-0d3126ba.d.ts and it is an interface. That's why it doesn't break (the Omit I did above was useless)

[gduliscouet-ubitransport]

@kettanaito I opened a PR to reuse the existing interface describing the class SetupWorkerApi. For me it is the only way to have it working on the consumer side (without the above workaround), but maybe you want to check the interface SetupWorkerApi is describing well enough the class SetupWorkerApi (at least TS it is matching according to TS)

[kettanaito]

Thanks for adding the fix, @gduliscouet-ubitransport!

I left a few comments on how we could export both the type and the class and fix this issue. Hopefully, that direction would also work.

[kettanaito]

Released: v0.49.1 🎉

This has been released in v0.49.1!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.