How to tell Typescript compiler to compile JSX in .ts files?

Question

I have some .ts files that has .jsx syntax in them. I want to tell tsc to compile my these .ts files like compiling .tsx files.

Is is possible to configure tsc to do that?

How can I configure vscode to support syntax highlighting for JSX syntax in these files?

Answer 1

No, you must have your react code in .tsx files, as the docs say:

In order to use JSX you must do two things.

1. Name your files with a .tsx extension
2. Enable the jsx option

The reason for this is that in typescript you cast in this form:

interface Point {
    x: number;
    y: number;
}

let p = <Point> {};

In tsx files however this is not possible because <Point> can be markup for a Point component.
Because of that in tsx files casting is not possible and you need to type assert:

let p = {} as Point;

But regular .ts files still support the casting form which will cause conflicts if you'll have jsx code in them.