What practical applications exist for preserving JSX post-transpilation of a tsx file?

While troubleshooting another issue, I decided to delve into Typescript's documentation on JSX usage.

I discovered that some options involve converting JSX while others do not.

I am puzzled as to why one would need to preserve JSX in transpiled files. Although it is possible to use babel for post-processing to handle JSX, the question remains: why?

Could there be transformations specific to JSX that are unsupported by Typescript? Is the retention of JSX necessary for React Native, considering the existence of a dedicated react-native option that mirrors react, but with different file extensions for generated files?

typescriptjsx

Answer №1

In a discussion on this issue thread, various reasons are mentioned for why the TS transpiler might be lagging behind, such as runtime assertions and JSX changes. In my personal experience, removing TypeScript through transpilation and then using Babel to handle the resulting code (which includes JSX) in a larger build process is more conceptually convenient. The performance benefits of this approach are unclear. Another example highlights the desire to transform JSX across the entire codebase instead of having TS focus only on specific parts. Developers working on projects with multiple build systems (such as TS, Webpack, Babel, and Rollup) often have to decide which tool to prioritize when functionalities overlap. I typically opt to let Babel handle React-related tasks due to its extensive history within the Facebook ecosystem.

Regarding the second question, according to the official documentation and a recent PR, selecting the react-native option results in output files with a js extension instead of jsx, but otherwise behaves similarly to preserve.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The object is not defined (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView')

I am currently working on developing a chat application using react-native with the following dependencies: "dependencies": { "@react-native-async-storage/async-storage": "~1.17.3", "@react-native-community/masked ...

typescriptreact-nativereact-native-gifted-chat

different ways to retrieve component properties without using inheritance

In order to modify certain properties of components after login, such as the "message" property of HomeComponent and the "age" property of UserComponent, I am unable to inherit the component class. What are some alternative methods to achieve this? Authen ...

angulartypescript

Efficient method for iterating through three arrays that have matching values and satisfy specified conditions in TypeScript

Struggling to speed up my Excel sheet creation time, currently taking over 20 seconds. I'm using the code below to compare three arrays and get the desired output: for (let i = 0; i < this.arrayNumberOne[0].length; i++) { let orangeOne = this.a ...

arraystypescripthashmapiteration

Transforming an array of JSON items into a unified object using Angular

I need to convert an array list into a single object with specific values using TypeScript in Angular 8. Here is the array: "arrayList": [{ "name": "Testname1", "value": "abc" }, { "name": "Testname2", "value": "xyz" } ] The desired ...

arraysjsonangulartypescript

Having trouble with your React/TypeScript/Redux/Thunk action not dispatching and the state remaining unchanged?

Currently, I am facing an issue while attempting to send a GET request to an API using React-Redux & TypeScript. The goal is to dispatch an action upon clicking a button (onClick event), make the request, update the state via the reducer, and finally log t ...

reactjstypescriptreduxredux-thunkstate-management

What is the best way to reload a React/TypeScript page after submitting a POST request?

I am working on a custom plugin for Backstage that interacts with Argo CD via API calls. To retrieve application information, I make a GET request to the following endpoint: https://argocd.acme.com/api/v1/applications/${app-name} If the synchronizati ...

reactjstypescriptbackstage

Ways to dynamically manipulate HTML elements in Angular 5

Recently, I've been attempting to programmatically transform an HTML element. Strangely, when I update the transform value in the console tab, it changes successfully, but for some reason it doesn't reflect in the element tab of the browser. onD ...

javascriptcssangulartypescriptangular5

Typescript: creating index signatures for class properties

Encountering a problem with index signatures while attempting to access static and instantiated class properties dynamically. Despite researching solutions online, I have been unable to resolve the issue. The problem was replicated on a simple class: int ...

typescript

Updating the data attribute of an object in HTML using Angular

I am trying to embed a PDF viewer inside a component. In order to dynamically update the PDF document within a sanitizer, I need to use an attribute with []. This works fine with images. <img src="assets/pic.jpg"/> <img [src]="'assets/pi ...

angulartypescript

Specific generic types do not incorporate abstract type context

Take a look at this code snippet: type Data = { person: { id: number; name: string; age: number } item: { id: number; name: string; price: number } transaction: { id: number; personId: number; itemId: number; quantity: number } } type Action<T ex ...

typescript

Unable to export Interface in Typescript - the specific module does not offer an export named Settings

I am encountering an issue while trying to export/import an interface in Typescript. The error message I receive is causing confusion as I'm unsure of where I went wrong. Uncaught SyntaxError: The requested module '/src/types/settings.ts' ...

javascripttypescriptvue.jsvuejs3vite

Creating a local HTML file using node.js: A step-by-step guide

Recently, I've delved into developing games using Typescript. However, I've encountered a bit of an issue when attempting to build my game - it requires running on a server. This limitation prevents me from creating an offline game with Node.js a ...

node.jstypescript

Tips for building an interface in TypeScript with a restricted range of indices

I'm working on a function that accepts parameters of type Record<string, string>. How can I define a type with a limited set of indexes without triggering a TypeScript compiler error? Is there a way to create an interface with only specific ind ...

typescripttypescript-typings

Combining ReactJS event handling for onClick and onKeyDown into a single handler for TypeScript

To ensure accessibility compliance, I am incorporating onKeyPress handlers into my application. However, I am facing a challenge with interactive <div /> elements. Here are the event handlers I want to trigger on click: const handleViewInfoClick = ( ...

javascriptreactjstypescript

Is a custom test required for PartiallyRequired<SomeType>?

Is there a way to create a function that validates specific fields as required on a particular type? The IFinancingModel includes the property statusDetails, which could potentially be undefined in a valid financing scenario, making the use of Required< ...

typescript

What is the best way to convert this into a distinct function using typescript?

Is there a way to create a single method in Protractor or Webdriver API that can get the browser width and height? const getWindowWidth = async () => { const size = await browser.manage().window().getSize(); return size.width; }; I need this metho ...

typescriptprotractor

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

In my typescript application, I am utilizing the FileReader to convert a blob into a base64 image for display within the template. adaptResultToBase64(res: Blob): string { let imageToDisplay : string | ArrayBuffer | null = ''; const re ...

javascripttypescriptasynchronousbase64filereader

What steps can be taken to avoid special characters in ion-input fields?

When inputting special characters into the field used for storing the alphanumeric serial number, they are accepted. I need to prevent special characters from being entered in the input field. <ion-input [(ngModel)]="serial_number" (ngModelCha ...

javascriptangulartypescriptionic-frameworkionic5

Change the type declaration of a list of elements to a list containing those elements organized within a container - Array<Wrapper<T>>

Is there a way to convert a plain array into an array of wrapped items in JavaScript? declare type MyGenericArray = [number, string, boolean] declare type WrappedGeneraicArray = Wrap<MyGenericArray> // WrappedGeneraicArr ...

typescript

Facing the issue once more - Angular displaying "Http failure response for... 0 Unknown Error"

I have been researching extensively on this issue, particularly on Stack Overflow. Many of the responses point to it being a CORS problem, but I am uncertain if that is the case in my situation. Therefore, I am reaching out for help once again and would gr ...

angulartypescriptrxjsangular-httpclient