TSConfig

Specify the JSX fragment factory function to use when targeting react JSX emit with jsxFactory compiler option is specified, e.g. Fragment.

For example with this TSConfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

This TSX file:

tsx
import { h, Fragment } from "preact";
const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);

Would look like:

tsx
const preact_1 = require("preact");
const HelloWorld = () => ((0, preact_1.h)(preact_1.Fragment, null,
    (0, preact_1.h)("div", null, "Hello")));
 Try

This option can be used on a per-file basis too similar to Babel’s /* @jsxFrag h */ directive.

For example:

tsx
/** @jsx h */
/** @jsxFrag Fragment */
 
import { h, Fragment } from "preact";
Cannot find module 'preact' or its corresponding type declarations.2307Cannot find module 'preact' or its corresponding type declarations.
 
const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);Try