Typescript compiler assumes JSX use

[NicholasBoll]

The Typescript compiler inside this repository always assumes a React context. This puts Typescript into a parsing mode of a tsx file context. This means valid Typescript syntax won't work if the file extension is a .ts file. Generics are treated JSX constructs in some cases.

• Operating System: Doesn't matter
• Cypress Version: 4.4.1
• Browser Version: Doesn't matter

Example:

const isKeyOf = <T>(obj: T, key: any): key is keyof T => {
  return typeof key === 'string' && key in obj;
}

Normally the file extension determines how the Typescript parser understands this. In normal Typescript code, the <T> is recognized as a generic. In JSX mode, it is recognized as a JSX element.

I traced it to this: https://github.com/cypress-io/cypress-browserify-preprocessor/pull/38/files#diff-efc83db4b84c72bbb60040a0125ad637R32-R37

The config sets jsx to react. This forces the Typescript parser to treat the string as a tsx file regardless of the original file extension.

Here's an example in the Typescript playground:
https://www.typescriptlang.org/play/#code/MYewdgzgLgBAlhA0gUwJ4HkBmMC8MA8AKgHwAUIARgFYBcMhANDANZp0CGYqAlHa6vAgs0IbIVzEYAbwBQMGACdkUAK4KwMKKgAOyUcIE4jMAOTQFcMAHMTMAGR2D8DZSoBuGQF8gA

In the config, the JSX is set to none. The output looks like:

"use strict";
const isKeyOf = (obj, key) => {
    return typeof key === 'string' && key in obj;
};

If you change the JSX in the config to react, the output looks like:

"use strict";
const isKeyOf = React.createElement(T, null,
    "(obj: T, key: any): key is keyof T => ",
,
    "return typeof key === 'string' && key in obj; }");

and the parser fails with an error.

Is this a Feature or Bug?

Bug maybe? If the behavior cannot be fixed, it should at least be documented.

I wasn't sure how to fit info in the template or what the solution should be. Perhaps use the file extension to determine if the jsx config flag should be used. Also possibly use the Typescript config instead of a hard-coded one?

[chrisbreiding]

@sainthkh Could you take a look at this?

[sainthkh]

Confirmed the problem. Trying to find the way to solve the problem.

[chrisbreiding]

🎉 This issue has been resolved in version 2.2.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀