JSX in Typescript without React

Use tsconfig reactNamespace option:

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "reactNamespace": "JSX",
  }
}

Define the JSX namespace with a createElement function:

// index.tsx
export const JSX = {
  createElement(name: string, props: { [id: string]: string }, ...content: string[]) {
    props = props || {};
    const propsstr = Object.keys(props)
      .map(key => {
        const value = props[key];
        if (key === "className") return `class=${value}`;
        else return `${key}=${value}`;
      })
      .join(" ");
      return `<${name} ${propsstr}> ${content.join("")}</${name}>`;
  },
};

export default JSX;

declare the types

// external.d.ts
declare module JSX {
  type Element = string;
  interface IntrinsicElements {
    [elemName: string]: any;
  }
}

Usage example

import JSX from "./index";

function Hello(name: string) {
    return (
        <div className="asd">
            Hello {name}
            <div> Hello Nested </div>
            <div> Hello Nested 2</div>
        </div>
    );
}

function log(html: string) {
    console.log(html);
}

log(Hello("World"));

If you use jsx: prevserve, it means that the Typescript compiler will output .jsx files rather than compiling it down to .js, as a result, you will need something like Babel to transpile your jsx eventually since your browser can't run jsx files.

To be honest, I'm not sure what you are trying to do, but you should either use jsx: react, or jsx: preserve + transpiler

Look at Stefan Baumgartners blog entry "JSX is syntactic sugar". It explains how to convert JSX to DOM elements at runtime using clean, easily readable code.