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
- Attempting to show array element of react select in list item of another class
- Variables in react props
- Redirect user to intended url after login Reactjs
- How to pass array of objects to Class in Typescript
- React Django CSRF token missing or incorrect
- Why it is not showing error, when using const in useState hook
- Function setTimeout not working after other clicks
- React + Material UI - Overriding MuiTheme in component withStyles
- Test redux-actions
- onClick passing in tests, but failing when physically clicked
- Why i got TypeError: Cannot read property 'toLowerCase' of undefined
- Make shared component with calling navigation.navigate() inside - React Native
- Google reCaptcha to work in React.js?
- React not passing along properties when rendering in variable
- Using multiple CSS rule names with the styled API in Material UI
- GraphQL - sort error - Unknown argument "sort"
- How to set a variable to false when ipad orientation is changed from landscape to portrait and vice versa using javascript and react?
- I have attempted to install netlify through npm but it fails
- setState in useEffect not update
- React Material UI Tabs Close
- How to get React Router to recognize a new route on a dynamic path
- Comment JSX code in Sublime and atom
- How does React JSX Spread Attribute work behind the scene?
- Make react read a external variable defined outside the root component
- By using styled components, how can I add some opacity to a background color that comes from an external prop?
- How to use an array element as a route element?
- Page tries to render before data is loaded from API - React
- How can I render different component using onClick() function in React?
- How to wait for data in useEffect hook before displaying it?
- onAuthStateChanged return undefined