Non React JSX

TypeScriptは、React with JSX以外のものをタイプセーフな方法で使用する機能を提供します。以下は、カスタマイズ可能なポイントを示していますが、これは高度なUIフレームワークの作成者向けです。

  • "jsx" : "preserve"オプションを使ってreact形式の出力を無効にすることができます。これは、JSXがそのままの状態で出力されることを意味します。そして、あなた自身のカスタムトランスパイラを使用してJSX部分をトランスパイルすることができます

  • JSXグローバルモジュールを使う:

    • JSX.IntrinsicElementsインターフェースのメンバをカスタマイズすることで、どのHTMLタグが利用可能で、どのように型チェックされるかを制御することができます。

    • コンポーネントを使用する場合:

      *デフォルトのInterface ElementClass extends React.Component <any any> {}宣言をカスタマイズすることによって、どのクラスがコンポーネントによって継承されなければならないかを制御できます

      • どのプロパティが属性(デフォルトはprops)の型チェックに使われるかを制御できます。declare module JSX {interface ElementAttributesProperty {props:{};}の宣言をカスタマイズすることで行います。

jsxFactory

--jsxFactory <JSX factory name>--jsx reactを一緒に渡すことで、デフォルトのReactとは別のJSXファクトリを使うことができます。

新しいファクトリ名はcreateElement関数を呼び出すために使われます。

import {jsxFactory} from "jsxFactory";
var div = <div>Hello JSX!</div>

コンパイル:

tsc --jsx react --reactNamespace jsxFactory --m commonJS

結果:

"use strict";
var jsxFactory_1 = require("jsxFactory");
var div = jsxFactory_1.jsxFactory.createElement("div", null, "Hello JSX!");

jsxプラグマ(jsx pragma)

jsxPragmaを使用してファイルごとに異なるjsxFactoryを指定することもできます。

/** @jsx jsxFactory */
import {jsxFactory} from "jsxFactory";
var div = <div>Hello JSX!</div>

--jsx reactを指定すると、このファイルはjsxプラグマで指定されたファクトリを使用して出力されます:

"use strict";
var jsxFactory_1 = require("jsxFactory");
var div = jsxFactory_1.jsxFactory.createElement("div", null, "Hello JSX!");