Custom Typescript JSX typescript jsx tsx

Typescript allows us to define a custom handler for its JSX syntax.

Define a React.createElement Replacement Define an Intrinsic Element Map JSX Element Attributes and Children Typing

The ElementAttributesProperty and ElementChildrenAttribute tell the typescript compiler what property to use when typechecking the JSX Element attributes and children.

Import your createElement function

Your newly defined createElement() function must be available in your jsx scope.

Since typescript 4 you can also define a Fragment function, that will be used to replace the <> tag.

Enable JSX in your tsconfig.json File

To enable jst and use our new factory method, we add it to our tsconfig.json file.