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