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!");