TypeScript: tsc transpiles jsx to more verbose code than babel

Viewed 83

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 tsc output the more verbose version?
  • Is there a setting in tsconfig.json that 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
0 Answers
Related