Typescript-transform-jsx NPM

typescript-transform-jsx

Typescript transform jsx to string

Table of Contents

typescript-transform-jsx

Motivation

Typesafe templates
Transform jsx to string in compilation time
Fast runtime

Install

$ npm i -D typescript-transform-jsx

Usage with ttypescript

Add it to plugins in your tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-native",
    "plugins": [{ "transform": "typescript-transform-jsx" }]
  }
}

See https://github.com/LeDDGroup/typescript-transform-jsx/tree/master/examples/example-ttypescript

Setup

Set the jsx flag to react-native or preserve in your tsconfig file. Then create a types.ts with the following content:

declare namespace JSX {
  type Element = string;
  interface ElementChildrenAttribute {
    children: any;
  }
  interface IntrinsicElements {
    [element: string]: {
      [property: string]: any;
    };
  }
}

This will declare custom JSX so you don't need react typings.

Example

interface Person {
  name: string;
  age: number;
}

const App = (props: { persons: Person[] }) => (
  <ul>
    {props.persons.map(person => (
      <li>
        {person.name} is {person.age} years old
      </li>
    ))}
  </ul>
);

Gets compiled to:

const App = props =>
  `<ul>${props.persons
    .map(person => `<li>${person.name} is ${person.age} years old</li>`)
    .join("")}</ul>`;

Roadmap/Caveats

Always handle children property implicitly
Self closing tags will be treated as such, (ie no children handling on the props)
Using spread operators on html elements require esnext environment because it compiles down to Object.entries expression:

// input
const props = { class: "container" };
<div {...props} />;
// output
const props = { class: "container" };
`<div ${Object.entries(...props).map(
  ([key, value]) => `${key}="${value}"`
)}></div>`;