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
- I can't install react using npx create-react-app?
- Cascading drop down in ReactJS controlled component
- What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
- Webpack frozen during '91% additional asset processing'
- fireEvent not properly calling event in react-testing-library
- Open modal with ReactJS (es6) and siblings components
- Access ref of component in another component?
- How to import .js file inside my .tsx file
- dataTable cols don't span to the correct width (dc.js,crossfilter, d3 v4.2.8,React)
- dev tool shows me this error "Warning: Each child in a list should have a unique "key" prop." please
- Flow error for prop string in template literal
- typescript stateless (functional) component warning using destructing?
- How to access state when component unmount with React Hooks?
- How to get setInterval in React to change a state variable?
- How do we return a Promise from a store.dispatch in Redux - saga so that we can wait for the resolve and then render in SSR?
- Semantic-UI-react fixed sidebar
- Is it possible to print 16 times in React
- REACT: put token from store into axios header
- React + Redux +Rails and webpack without gem
- Context Provider not re-rendering on state change
- React Native Image: How to render particular image based on input prop?
- Testing react-contenteditable with react testing library
- What's the use of this statement: { router: routerReducer }
- React Hooks reversing syntax of useState - pretty strange
- react: menu + submenu + content
- React CSS modules, inheriting from a common css module
- .find() method: How i can return a boolean instead my finded object?
- What is React Hot Loader?
- .map is not a function. map through an array of objects. (React Hooks)
- Load more button in React