Given the following JSX snippet:
<Typography variant={ "subtitle2" }>
{ props.text }
</Typography>
TypeScript transpiler tsc outputs
_jsx(
Typography,
Object.assign(
{ variant: "subtitle2" },
{ children: props.text }
),
void 0
)
whereas babel outputs
_jsx(
Typography,
{ variant: "subtitle2", children: props.text }
)
Needless to say, tsc output is much more verbose and with large components, it results in quite a lot more code.
- Why does
tscoutput the more verbose version? - Is there a setting in
tsconfig.jsonthat will drop this extra verbosity?
Currently, the tsconfig.json has the following relevant settings:
{
compilerOptions: {
"jsx": "react-jsx",
"target": "es6" // also tried "es2019"
"module": "es6" // also tried "esnext"
}
}
With babel the following .babelrc.json is in place:
{
"presets": [
"@babel/preset-typescript",
[
"@babel/preset-react", {
"runtime": "automatic"
}
]
]
}
Versions:
typescript: 4.2.4
@babel/core: 7.15.8
@babel/cli: 7.15.7
@babel/preset-typescript: 7.15.0
@babel/preset-react: 7.14.5