Msw: Question: why i'm getting typescript error by using msw

[x1core]

Describe the bug

Hi, just discovered awesome msw. Time to try it out. I used CRA for my test application. Unfortunately i'm getting following error during compilation and executing npm start.

TypeScript error in /node_modules/msw/lib/types/utils/internal/compose.d.ts(3,12):
',' expected.  TS1005

    1 | declare type ArityOneFn = (arg: any) => any;
    2 | declare type PickLastInTuple<T extends any[]> = T extends [
  > 3 |     ...rest: infer U,
      |            ^
    4 |     argn: infer L
    5 | ] ? L : never;
    6 | declare type FirstFnParameterType<T extends any[]> = Parameters<PickLastInTuple<T>>[any];

Not sure what i've done wrong. Please sorry for that stupid question. So here I am and friendly asking for some help or hints.
Here is my setup:

Environment

• msw: 0.24.1
• nodejs: 12.18.3
• npm: 6.14.7

Please also provide your browser version.
Chrome Version 87.0.4280.67

To Reproduce

Steps to reproduce the behavior:

1. Installed msw by npm i -D msw
2. Configured setupTest.ts

import { server } from './test/server'
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

1. Configured /src/test/server.ts

import { handlers } from './server-handlers'
import { rest } from 'msw'
import { setupServer } from 'msw/node'
const server = setupServer(...handlers)

export { server, rest }

1. Configured /src/test/server-handlers.ts

import { fetchControllerMock } from 'functions/mock/ApiMock'
import { rest } from 'msw' // msw supports graphql too!

const handlers: any = [
    rest.get('**/api/**', async (req, res, ctx) => {
        const data = await fetchControllerMock('abc', 'success')
        return res(ctx.json(data))
    }),
]
export { handlers }

1. My `ts-config.json``

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es2018",
    "outDir": "./build",
    "sourceMap": false,
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "noEmit": true
  },
  "include": [
    "src",
  ],
  "exclude": [
    "build",
    "node_modules",
    "test"
  ]
}

Expected behavior

no compilation errors.

Screenshots

[chrisguttandin]

Hi @x1core, the error looks like your version of TypeScript doesn't yet support Variadic Tuple Types. Do you maybe use a TypeScript version below 4.0?

[x1core]

Hi, thanks for the quick reply. Indeed im using 3.9.7.
So msw requires >4.0.0?

[chrisguttandin]

Yes, I think so. As far as I know that wasn't an explicit decision but the usage of variadic tuples implies that.

[x1core]

Just tested with typescript 4.1.2 and it works <3. Thanks a lot. I'll close the issue

[kettanaito]

My bad, I didn't realize that is a 4.x feature. What would be the correct way to specify the required version of TypeScript?

[timdeschryver]

Should we add an (optional) peer dependency for TypeScript?

[florian-milky]

How do you solve that without upgrading typescript? Do I have to downgrade msw?

=> 0.20.5 is the latest typescript v3 release

[chrisguttandin]

There is a tool called downlevel-dts that can be used to produce type definitions which are compatible with previous versions of TypeScript.