alisabzevari alisabzevari - 2 months ago 14
TypeScript Question

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

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

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.