score:4
.ts
files have an <AngleBracket>
type assertion syntax which conflicts with the JSX grammar. In order to avoid breaking a ton of people, we use .tsx
for JSX, and added the foo as Bar
syntax which is allowed in both .ts
and .tsx
files.
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
And the other is the as-syntax:
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
We can use .ts with as-syntax
but <string>someValue
is cool!
score:8
I believe with the .tsx files you could use the all JSX (JavaScript XML) code. Whereas in the .ts file you can only use just typescript.
score:9
The reason why .jsx extension was introduced is that JSX is an extension of JS syntax and thus .jsx files don't contain valid JavaScript.
TypeScript follows the same convention by introducing .ts and .tsx extensions. A practical difference is that .tsx don't allow <Type>
type assertions because the syntax is in conflict with JSX tags. as Type
assertions was introduced as a replacement for <Type>
and considered a preferred choice for consistency reasons in both .ts and .tsx. In case the code from .ts is used in .tsx file, <Type>
will need to be fixed.
The use of .tsx extension implies that a module is related to React and uses JSX syntax. In case it doesn't, the extension may give false impression about module contents and the role in the project, this is the argument against using .tsx extension by default.
On the other hand, if a file is related to React and has good chances to contain JSX at some point, it can be named as .tsx from the beginning to avoid renaming later.
For instance, utility functions that are used together with React components may involve JSX at any point and thus can be safely use .tsx names, while Redux code structure isn't supposed to use React components directly, can be used and tested apart from React and can use .ts names.
score:67
It's kind of a convention to use x
in the end when your JavaScript is in JSX Harmony
mode. That is, when this is valid:
doSomething(<div>My div</div>);
However, your file extension doesn't really matter, as long as your pre-processors are aware of your decision (browserify or webpack). I, for one, use .js
for all my JavaScript, even when they are React. The same applies for TypeScript, ts/tsx
.
EDIT
Now, I would strongly recommend using JSX for Javascript with React syntax and TSX for TypeScript with React because most editors/IDEs will use the extension to enable or not the React syntax. It is also consider it to be more expressive.
score:265
You can use tsx
instead of ts
with very little difference. tsx
obviously allows the usage of jsx
tags inside TypeScript, but this introduces some parsing ambiguities that make tsx slightly different. In my experience these differences are not very big:
Type assertions with <>
don't work as that is the marker for a jsx tag.
TypeScript has two syntaxes for type assertions. They both do the exact same thing but one is usable in tsx the other is not:
let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts
I would use as
instead of <>
in ts
files as well for consistency. as
was actually introduced in TypeScript because <>
was not usable in tsx
.
Generic arrow functions with no constraint are not parsed correctly
The arrow function below is ok in ts
but an error in tsx
as <T>
is interpreted as the start of a tag in tsx
:
const fn = <T>(a: T) => a
You can get around this either by adding a constraint or not using an arrow function:
const fn = <T extends any>(a: T) => a
const fn = <T,>(a: T) => a // this also works but looks weird IMO
const fn = function<T>(a: T) { return a;}
Note
While you can use tsx
instead of ts
, I would recommend against it. Convention is a powerful thing, people associate tsx
with jsx
and will probably be surprised you don't have any jsx
tags, best keep developer surprise to a minimum.
While the ambiguities above (although probably not a complete list) are not big they probably played a big part in the decision to use a dedicated file extension for the new syntax in order to keep ts
files backward compatible.
Source: stackoverflow.com
Related Query
- Is there any downside to using .tsx instead of .ts all the times in typescript?
- Is there any downside to using .jsx instead of .tsx all the times in ionic-react?
- React createRef() vs callback refs. Is there any advantage of using one over the other?
- Is there any way to fetch all the responses stored in api slice [RTK Query]?
- Is there a reason people prefer using the constructor of a React component instead of componentWillMount?
- can i use the tsx extension for test files if using react with typescript
- Cannot get rid of this comma on the bottom of html. I am using react and in the index.html I don't see it there or in any of my components
- Is there a way to map over the cities on my cities array using the api and rendering the info from all cities on the array?
- Is there any way i can trigger the onEnded attribute on the video element while testing using jest?
- Is there any difference in setState when using concat versus assigning the value directly?
- Is there any function to use to see the new updated array state using React Js Hook?
- React loading HOC: all the props provided in a list are set to optional and if any of them is undefined shows a spinner instead of the component
- Using react-youtube, is there any way to reference the player other than with an event?
- Is there any way to disable all the errors and warnings that appear in the console?
- Is there any way to customize the navigation arrows and dots of "react-owl-carousel" in react using css or js?
- Is there any way to write the function without explicitly using defaultProps in react function component?
- I'm using react-adal for Azure AD single sign in. It's token expires in 1hr. Is there any way to refresh the session or extending session expiry time
- Return one array object instead all the object based on the condition using map function
- Is there any way to call the api and save it using useState in reactjs?
- Is there any way to call useEffect hook after resetting all the states
- Menu displaying on all the pages. Is there any way only to display on a specific page in React?
- Is there any way to store the files locally on computer using react with electron
- Is there any way to render value on the basis of clicked item from an array in react using router?
- Is there a way to universally cancel all calls to setstate on any unmounted component or to hide the errors produced by attempting it?
- What could be the downsides of using Redux instead of Flux
- How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
- How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?
- is there any way to access the parent component instance in React?
- Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks
- Destructuring props in the function parameters using TypeScript
More Query from same tag
- TypeError: fsevents is not a constructor (already tried a bunch of answers)
- How do I redirect an index route to a custom route on React?
- How to reference SVG elements inside iframe using CSS?
- Index.html doesn't load css nor script on nested url
- unable to add x-axis label name for the graph (svg graph)
- Getting an Error: Before running a Saga, you must mount the Saga middleware on the Store using the applyMiddleware
- Defining Private Route in react redux application?
- ImmutableJS - Update only one key-value in Object
- Keypress is failing to record all keystrokes
- Border behind grid line
- Error while creating an action: Action must be plain object
- How to pass react-bootstrap carousel items to a Map function?
- How to change image using hover in jsx
- Using setState inside axios.fetch...then() with typescript
- Typescript reducer issue
- Cannot read property 'type' of undefined in AOS animation
- I am trying to map over an array and add comma's in between each instance except for the last
- Getting a ID back from a reducer in redux
- Embedded Document Viewer control in ReactJS
- Computed Key from Symbol in Typescript Interface
- Next JS Image Optimization
- Images are not displaying with <li> tag in map function for array object in Reactjs
- onClick not propagated
- Why can I access nested objects before setting my state but not after?
- Dynamic layout of React component from JSON
- How to fix "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" error in react app with nodejs api
- How to distinguish admin and customer role when create user with createUserWithEmailAndPassword firebase auth in ReactJS
- Filter array of Object values in React chartjs2 dataset
- React component doesnnt re render
- React Hook "useContext" is called in function "age" which is neither a React function component or a custom React Hook function