score:198
use .ts
for pure typescript files.
use .tsx
for files which contain jsx.
for example, a react component would be .tsx
, but a file containing helper functions would be .ts
.
score:7
when you use .tsx you can use jsx in that particular file while .ts gives you error.
score:15
all of the above answers are correct.
.ts files contains only pure typescript
.tsx have included jsx also.
on another point of view, you can copy everything from a .ts
file and paste on .tsx
file, and you don't need to modify anything. but if you're copying from a .tsx
file you need to refactor it by removing the jsx
elements.
score:39
.tsx extension is used when we want to embed jsx elements inside the files while .ts is used for plain typescript files and do not support adding jsx elements.
Source: stackoverflow.com
Related Query
- What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?
- What are the differences between Redux-Thunk and Redux-Promise when used with Axios apis?
- ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?
- What are the difference between reactJS props and refs?
- What are the difference/similarities between React (app framework from Facebook) and react.js (reactive extensions for JS)?
- What is proper way to store code/functions that are used by both the frontend and backend?
- What is the difference between React Native and React?
- What is the difference between state and props in React?
- What is the difference between HashRouter and BrowserRouter in React?
- What is the difference between redux-thunk and redux-promise?
- What is the difference between componentWillMount and componentDidMount in ReactJS?
- What is the difference between NextJs and Create React App
- What is the difference between jest.fn() and jest.spyOn() methods in jest?
- What is the technical difference between .jsx and .js files
- What is the difference between hashHistory and browserHistory in react router?
- What is the difference between Reactjs and Rxjs?
- What is the difference between .env.local and .env.development.local?
- What is the difference between Jest and enzyme?
- What is the difference between JavaScript and JSX?
- What is the difference between `PropTypes.node` and `PropTypes.any` in react?
- What is the difference between render and return in reactjs?
- What is the difference between Redux Thunk and Redux Saga?
- what is the difference between import and const and which is preferred in commonjs
- What is the difference between Box and Grid in Material-UI?
- What is the difference between @material-ui and @mui
- What is the difference between .js, .tsx and .jsx in React?
- What is the difference between useQuery and useLazyQuery in Apollo graphQL?
- React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?
- react-redux: What is the difference between state.setIn() and state.set()?
- In React, what is the difference between onKeyUp and onKeyUpCapture (and onKeyDown/Capture)?
More Query from same tag
- typescript class using function with many shapes (overloads) | generics
- What exactly is makeStyles in material-ui?
- Nextjs button onClick does not work after static export
- How to make item list auto update rendered list when item is deleted?
- How to later use a method on a object that is stored in useState?
- Interact with page element found by regular document query selector in jest/RTL test
- ant design - datepicker with time saves with 00:00:00 as time?
- How to get item index in map function
- Getting query parameters from react-router hash fragment
- React component as classic object
- React - onChange function 'this.state' is undefined
- React Custom Table Sort
- How to show informations with triggering the show/close button in React?
- svg not rendering correctly when used with by multiple react components
- Is it possible to create a function inside react render that contains an if statement to setState
- Call a React Function from inside Render
- Display image from JSON/API in React using JSX
- what's the difference between setCount(prev => prev + 1) and setCount(count + 1)?
- React.js: Axois Post stay on pending(but i am getting data)
- Data is showing in console but not in screen - reactjs
- Why React.DOM is undefined?
- Using NPM Install
- React router - click on card and redirect to a new page with content of that card (card details) using useParams and reacthooks
- Dynamically change what cloud function I use base on environment (prod or testing)
- Costumize reactjs antd ant-carousel bullets - Any suggestions?
- Unsupported platform for fsevents@2.3.2 installation issue
- Invalid hook call error when using React function component from npm package
- The cart does not update in real time react and redux
- Gettin 'null' while fetching data from api with React Context
- Styled components using pseudo element :checked