TypeScript JSX without React

Indeed, the JSX section of the TypeScript handbook is a great resource; for those of you who haven't, check it out.

If you want tsc to compile your JSX, you will need to do the following (extremely broad overview):

1. Declare the IntrinsicElements interface/type in the JSX namespace (enable type-safety).
2. Create a JSX factory function.
3. Configure your consuming app's tsconfig to use "react" (or another jsx option) code generation and point to your JSX Factory (using the "jsxFactory" option).
4. Import your JSX factory function into a .tsx file.

Here's a more in-depth look at this. Also, you might like to see a repository or maybe a working example/playground.

The JSX namespace

Here, you tell TypeScript how to interpret your JSX code. At a minimum, you need to declare IntrinsicElements, but there are other types you can declare that will give you better type-hinting, enable component features, and generally improve/tweak how your JSX is understood by TypeScript.

Here's an example declaration of the JSX namespace:

/// <reference lib="DOM" />

declare namespace JSX {
    // The return type of our JSX Factory: this could be anything
    type Element = HTMLElement;

    // IntrinsicElementMap grabs all the standard HTML tags in the TS DOM lib.
    interface IntrinsicElements extends IntrinsicElementMap { }


    // The following are custom types, not part of TS's known JSX namespace:
    type IntrinsicElementMap = {
        [K in keyof HTMLElementTagNameMap]: {
            [k: string]: any
        }
    }

    interface Component {
        (properties?: { [key: string]: any }, children?: Node[]): Node
    }
}

A few notes:

• If your intending to work with HTMLElements and Nodes, the DOM lib (lib.dom.d.ts) is a great resource to get better type checking. In this example, I've used it to declare all real HTML tags as valid Intrinsic elements. You could further extend this, for example, to preload EventHandlers like onclick via GlobalEventHandlers.
• Element is another type TypeScript looks for in the JSX namespace. This is optional (defaulting to any). Use this to specify the return type of your factory function.
• We can create a simple function-based component with this definition (I've defined a custom helper with the Component interface.
• For class components, we need to declare the JSX.ElementClass interface. See here for more details.

The JSX Factory Function

The JSX namespace helps us define how we intend to use JSX in our code, but we still need to implement a function that can handle the code generated by tsc. Our factory function should follow the form (tag: string, properties: { [k: string]: any }, ...children: any[]): any, or something more specific. Here's an example that will enable functional components (N.B. it's big and ugly):

function jsx(tag: JSX.Tag | JSX.Component, 
             attributes: { [key: string]: any } | null, 
             ...children: Node[]) 
{

    if (typeof tag === 'function') {
        return tag(attributes ?? {}, children);
    }
    type Tag = typeof tag;
    const element: HTMLElementTagNameMap[Tag] = document.createElement(tag);

    // Assign attributes:
    let map = (attributes ?? {});
    let prop: keyof typeof map;
    for (prop of (Object.keys(map) as any)) {

        // Extract values:
        prop = prop.toString();
        const value = map[prop] as any;
        const anyReference = element as any;
        if (typeof anyReference[prop] === 'undefined') {
            // As a fallback, attempt to set an attribute:
            element.setAttribute(prop, value);
        } else {
            anyReference[prop] = value;
        }
    }

    // append children
    for (let child of children) {
        if (typeof child === 'string') {
            element.innerText += child;
            continue;
        }
        if (Array.isArray(child)) {
            element.append(...child);
            continue;
        }
        element.appendChild(child);
    }
    return element;

}

TSX and tsconfig

Now, all that's left is to use our jsx function. Our tsconfig should configure at least the following:

{
  "compilerOptions": {
    "jsx": "react", // or react-jsx, etc.
    "jsxFactory": "jsx",
  }
}

Now, we can write JSX in any .tsx file as long as we import our jsxFactory:

import jsx from './jsxFactory';

function Ping({ blurt }: { blurt: string }) {
    return <div>{blurt}</div>
}

var el = <Ping blurt="ya"></Ping>;

// var div: HTMLElement
var div = <div id="foo">Hello JSX! {el}</div>;

document.body.appendChild(div)

Thanks to JSX.Element, TypeScript knows the result of JSX is an HTMLElement.