Make default JSX mode "react"

To enable JSX syntax in TypeScript you need two steps:

• add "jsx": "react" to "compilerOptions" in tsconfig.json
• use .tsx extension

This is quite troublesome if you want to reuse certain generators/boilerplates/build scripts for us. It is also against the single source of truth principle and can be confusing. I recently stumbled over a bug where we used the .tsx extension, but hadn’t configured the tsconfig.json.

There was a lot of discussion recently about changing the .js extension to .mjs to introduce ES6 modules to Node and many people are against that and prefer to have an additional flag in the package.json. I’d like to see the same for TypeScript and JSX:

• the .tsx extension is purely optional
• only "jsx": "react" in tsconfig.json is mandatory

[basarat]

I’ve been using the new as syntax for assertion exclusively (and recommending it for others as well). Maybe <> style assertions should be switched off. It should result in compile errors for existing code and they can easily migrate to as.

^ Of course I might be wrong and your judgement is better 🌹

[donaldpipowitch]

I want one “place” (like a file) to enable JSX for TypeScript, so I can easily share or generate boilerplate for a new project for example. I often see developers (like myself) starting a new project with files using the .tsx extension, but forgetting about setting the tsconfig.json, too (or the other way around). Additionally I don’t want to distinguish .ts and .tsx in my build scripts (like the entry in a Webpack configuration). Having two properties in the tsconfig.json (one for setting a pragma/framework like “react” and one for enabling JSX in .ts files for the whole project) would solve this.

I didn’t count two properties in tsconfig as “multiple configurations” in this case, because they live in the same file and exactly where they belong - in the project configuration file. I dislike having the .tsx extension as an additional “configuration” step.