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