How can I transform TSX source code to TS code?

user_438273 0
Viewed 333

Essentially, I'm wanting the behavior provided by @babel/plugin-transform-react-jsx, but preserving all types, other TS language features, ESNext syntax, comments, etc. (I simply want to transform the TypeScript XML-formatted code into plain TypeScript using the specified JSX-factory function (e.g. React.createElement / jsx / bring-your-own / etc.)

// in
let name: any = 'world';
const div = <div>hello {name as string}</div>;

// out (classic runtime)
let name: any = 'world';
const div = React.createElement('div', null, 'hello ', name as string);

// out (automatic runtime)
let name: any = 'world';
const div = _jsxs('div', { children: ['hello ', name as string] });
babeljs tsx typescript reactjs
1 Answers

I think your'e misunderstanding the concept of typescript usage. We only use typescript in development for a solid schema based approach. On running the build command your typescript code gets coverted into javascript code and all associated typescript features are removed. So bacically we run javascript in production.

What I've understood is that you want to preserve behavior provided by @babel/plugin-transform-react-jsx along with accociated typescript types with it on compiling the typescript code. However in my opinion that's not possible because typescript compiler would only convert typescript code to js, discarding all types.

user_138558520
Related