How to use a TypeScript cast with JSX/TSX

Question

When casting in a .tsx file, the compiler assumes it to be JSX, e.g.:

(<HtmlInputElement> event.target).value

gives an error

JSX element type 'HtmlInputElement' is not a constructor function for JSX elements

How do you cast TypeScript in a .tsx file?

as is the recommended syntax for type assertions. I mention this here as well basarat.gitbooks.io/typescript/content/docs/types/… 🌹 — basarat
– basarat, Commented Jun 6, 2016 at 1:53
This would explain the 100+ errors that resulted in my IDE just from switching the .ts extension to .tsx when porting typescript code into React. There was one <typecast> early on in the file and everything else thereafter was misinterpreted. — wojtow
– wojtow, Commented Jun 14, 2020 at 6:21

RationalDev likes GoFundMonica · Accepted Answer · 2016-06-03 12:07:18Z

95

The as operator was introduced to TypeScript 1.6 to replace casts in .tsx files, e.g.:

(event.target as HTMLInputElement).value

answered Jun 3, 2016 at 12:07

12.7k7 gold badges51 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1