Typescript compiler assumes JSX use #44
Description
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?