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
- How could a component pass itself as an argument in React?
- ZoomMtg is overwriting all css in my entire ReactJS website
- Change URL when scroll into sections
- React hook Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- Use hoist-non-react-statics with withRouter
- Cannot read property of object that I got from axios
- store data in browser
- can't delete data with axios from firebase database
- How to limit array to 5 items and put new item at top of list
- How do I re-render a network graph in react?
- How React implements its hooks (at a high level)
- React.js data not saving to state variable
- How can i fix @fontface issue in my react application?
- useEffect localStorage loop
- React: Show different components based on conditions
- How to show a child or another depending on parent hover state (CSS Only)
- Is it OK to use two or more functions for useEffect?
- How to pass prop as undefined by leaving it out in a declaration in react/typescript project?
- using mixins of a react component in es6 style
- How to apply different background colour and different border colour for reusable components in react?
- How I can change color of input selected in react-date-range package?
- conditionally render child component following onChange event
- Implement the scroll func in React without using DOM selector
- How to set default minimum width scaling in Electron
- Where should I handle sorting in Redux App?
- Detect update in observable prop
- React only sometimes is throwing cannot map property 'map' of undefined
- How to get access to CSS values from a styled component (React)?
- State variable inside a function defined within useEffect hook is not updating when value changes
- How can I unit test my react component prop API