Make default JSX mode "react"
See original GitHub issueTo enable JSX syntax in TypeScript you need two steps:
- add
"jsx": "react"
to"compilerOptions"
intsconfig.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"
intsconfig.json
is mandatory
Issue Analytics
- State:
- Created 7 years ago
- Reactions:4
- Comments:33 (24 by maintainers)
Top Results From Across the Web
JSX In Depth - React
Specifying The React Element Type ... The first part of a JSX tag determines the type of the React element. Capitalized types indicate...
Read more >Introducing the New JSX Transform – React Blog
Remove all unused React imports as a result of upgrading to the new JSX transform. Change all default React imports (i.e. import React...
Read more >Introducing JSX - React
Below, you can find the basics of JSX necessary to get you started. ... By default, React DOM escapes any values embedded in...
Read more >Strict Mode - React
You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using ref...
Read more >React Without JSX
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 toas
.^ Of course I might be wrong and your judgement is better 🌹
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 thetsconfig.json
, too (or the other way around). Additionally I don’t want to distinguish.ts
and.tsx
in my build scripts (like theentry
in a Webpack configuration). Having two properties in thetsconfig.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.