How TypeScript checks a .tsrx file

TypeScript checks a TSX copy of each .tsrx file, and every error points back to the line you wrote.

Your editor underlines mistakes in .tsrx files now. But TypeScript has never heard of .tsrx. So who checks them?

A translation step does. It turns each .tsrx file into a TSX copy that TypeScript can read. TypeScript checks the copy, and each error points back to your line.

Press Check. Then pick label="Home" and check again.

How does TypeScript check a file it can't read?

Pick a value for label. Press Check. Watch the error move back to your line.

Step in the check

1. Make a copy

Press Check to start.

The terminalTry it

Terminalnot checked yet

Nothing checked yet.

Your code: App.tsrx

import { Nav } from './Nav.tsrx'; export function App() @{ <Nav label={42} />}

The copy TypeScript reads

/** @jsxImportSource @markless/typescript-plugin */import { Nav } from './Nav.tsrx';export function App() {return <Nav label={42} />;}

Nothing yet. Press Check.

Simplified. The copy and the error line are real output from Markless's type checker for these two files. The terminal line drops the folder path.

Notice that TypeScript reads only the copy. Your .tsrx file stays as you wrote it.

What gets checked

The copy keeps your real types. So a wrong prop is an error at the exact attribute.

import { Nav } from './Nav.tsrx';

export function App() @{
	<Nav label={42} />
}

Nav wants label to be a string. TypeScript reports that number is not assignable to string, and it underlines label.

The check covers the body of the file too. That includes attributes, event handlers, and element handles.

From the command line

Inside the Markless repo, pnpm typecheck checks the whole workspace. It wraps tsc, so -p, --watch, and every other tsc flag still work.

pnpm typecheck

A type error in a .tsrx body shows your file, line, and column. A file that does not parse fails the run too.

counter.tsrx(9,8): error TS2322: Type 'string' is not assignable to type 'number'.
broken.tsrx(6,1): error TS91001: Markless TSRX parse error: Unexpected '}' in JSX text
Found 1 Markless TSRX compile error.

Next: Types pass. But does the button still count when someone clicks it? Testing →