Stack Overflow
Stack Overflow

Questions tagged [tsx]

Extension for TypeScript files using JSX syntax

TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript, as long as:

  1. Files are named with a .tsx extension
  2. The jsx compiler option is enabled

Documentation: JSX

This tag used to be about Intel's transactional memory. Use for that. See Wrong usage of the [tsx] tag on meta.

674 questions
9
votes
2 answers

ReactJS TypeScript pure component with children

I have a TSX component that is a container wrapping its children like this: import * as React from "react"; interface IProps extends React.Props { } interface IState { } export class Box extends React.Component { render()…
Tomáš Hübelbauer
  • 9,179
  • 14
  • 63
  • 125
8
votes
1 answer

What does NextPage in Next.js do?

I just started using TypeScript with Next. What does this do? import { NextPage } from 'next'; export const Page: NextPage = () => {} I looked at the docs but it does really give a good explanation in what it does. I am guessing by the name that it…
cyberAnn
  • 411
  • 1
  • 7
  • 16
8
votes
4 answers

Typescript RefForwardingComponent not working

I am trying to make my component accept a ref. I have a component like so: const MyComponent: RefForwardingComponent = (props, ref) => { return
Hoopla
} But when I try to pass a ref to is…
Mathias Nielsen
  • 125
  • 1
  • 2
  • 7
8
votes
2 answers

How to extend JSX.IntrinsicElements['div']? TS2499

How come I can create a new type via JSX.IntrinsicElements['div'] & X but I can't extend it? I don't understand the error message -- am I not simply adding an "optional type"? What's the difference between extending types these 2 different ways?
mpen
  • 272,448
  • 266
  • 850
  • 1,236
8
votes
1 answer

How to run Mocha tests written in tsx?

Is there any way to run mocha tests written in typescript - tsx ? When I run mocha --require ts-node/register sometest.tsx or mocha --require ts-node/register --compiler ts:ts-node/register --compiler tsx:ts-node/register sometest.tsx And the…
Tan Dat
  • 2,888
  • 1
  • 17
  • 39
7
votes
2 answers

Generic component with default type

In a TSX file, a generic component can be defined: const MyComponent = () =>

my component

Note the , after A. Now if I want A to be string by default, one would naturally assume that the above should be written: const MyComponent =…
John
  • 4,786
  • 8
  • 35
  • 44
7
votes
1 answer

Why arrow function name must be const/let?

I have a tsx file with react-native. My function name is underlined if function is not set to const or let with this message: Cannot find name 'goBack' goBack = () => { // do stuff } But it works if I set const or let: const goBack = () => { …
Cracky
  • 97
  • 1
  • 8
7
votes
1 answer

Type 'Element[]' is not assignable to type 'ReactElement'

I'm trying to add this simple div to the return block of my .tsx file:
ntonnelier
  • 1,539
  • 3
  • 23
  • 49
7
votes
2 answers

In TSX file : Property 'createRef' does not exist on type 'typeof React'

I need the reference of the component. Just shifted from jsx to tsx and can't find a solution for this problem. Other workaround would be to use query selector but that's not a good way of doing things in react I believe. Here is the constructor…
Aman Kumar
  • 83
  • 1
  • 2
  • 6
7
votes
1 answer

.tsx webpack compile fails: Unexpected token <

My app compiles with .ts, .js, and .jsx files and runs. Now I try changing a .jsx file to .tsx and it breaks. How do I fix this compile error: ts-loader: Using typescript@1.6.2 and C:\users\ruser\Desktop\Downloads\divinote\site\tsconfig.json …
Richard
  • 14,798
  • 21
  • 70
  • 103
6
votes
2 answers

className is not changed to class attribute for custom elements in JSX

In one of my React components, I have the following definition for some custom elements: declare global { // eslint-disable-next-line @typescript-eslint/no-namespace namespace JSX { interface IntrinsicElements { …
Tanrikut
  • 418
  • 5
  • 11
6
votes
1 answer

React js Typescript Argument of type 'string' is not assignable to parameter of type 'SetStateAction'

Hello I'm having this error: Argument of type 'string' is not assignable to parameter of type 'SetStateAction'. this is a part of my code: . . . const[ idPadre, setIdPadre ] = useState(0); . . .