Is babel necessary if using TypeScript?

Question

typescript

Good day to all! Such a question: why is it recommended to use babel with TypeScript?
I tried to make a config for a React project without babel, everything seemed to work. But the babel site says that if you write in TypeScript, then use preset-typescript. What for? What is the task of babel? Tell me please)

Answer 1

Typescript compiler is a tool for typechecking and compiling typescript to javascript. He also knows how to transpile the constructions of new js standards into older standards, but this is not the main task of this tool, and it makes it worse than target tools, in particular, it can only be configured for a specific standard.
Babel is a tool for parsing js code to AST, bypassing and modifying AST, and reverse serializing AST to js. It is also an ecosystem of plugins and presets. Plugins usually implement the transpilation of one of the features of a newer standard into an older one. Presets are simply a configurable set of plugins.
Also in Babel AST there is support for some js extensions (and ts is also a js extension), but this is all enabled with flags.
The babel ecosystem has a preset-env aimed specifically at transpiling newer standards into older ones. Its feature is browserlist support and connection of only those plug-ins that are needed for the specified browsers. Due to this, a more optimal js is obtained at the output, since many features after transpiling work more slowly than native ones and take up more code.
There is also preset-typescript in the babel ecosystem, which includes support for ts syntax and transpilation of ts to js. At the same time, unlike tsc, it does not do type checking, and some entities may be processed incorrectly (like most third-party ts compilers, because ts does not have a strict spec and the only source of truth is the tsc code, which is far from ideal) .
The optimal output result (albeit at the expense of build time) is when the ts code is first processed through tsc without transpiling to the old standards, and then transpiled using babel + preset-env + browserlist.