概要
https://www.typescriptlang.org/tsconfig#jsx
{
"jsx": "preserve"
}
JSX は TypeScript や JavaScript の記法ではないのでコンパイルが必要です。
tsx
、jsx
ファイルを jsx
や js
にコンパイルする際の出力の形式を指定します。
詳細
preserve
{
"jsx": "preserve"
}
declare namespace JSX {
interface IntrinsicElements {
section: any;
h1: any;
p: any;
}
}
const Component = () => (
<section>
<h1>Component</h1>
<p>Contents</p>
</section>
);
(JSX の型についてはこちらの記事がわかりやすいです!TypeScript の型における JSX サポートが 100%分かる記事 - Qiita)
の場合は
"use strict";
const Component = () => (<section>
<h1>Component</h1>
<p>Contents</p>
</section>);
こうなります。preserve
は JSX を JSX のまま保持するので、拡張子は.jsx
になり、JSX の記法もそのままになります。
JSX のコンパイルを tsc
ではなく Babel など他の誰かに任せたい場合などに使用します。
react
{
"jsx": "react"
}
React のコードに変換したい場合はreact
を指定します。
とりあえずコンパイルだけなので@types/react
だけインストールします。
$ npm install --save-dev @types/react
const Component = () => (
<section>
<h1>Component</h1>
<p>Contents</p>
</section>
);
@types/react
がインストールされていれば JSX の型について自前で書く必要はありません。
"use strict";
const Component = () => (React.createElement("section", null,
React.createElement("h1", null, "Component"),
React.createElement("p", null, "Contents")));
結果はこれこちら。JSX の記法が完全に消えて React のコードに置き換わり、拡張子も.js
になりました。
react-native
{
"jsx": "react-native"
}
react-native
は使う予定が無いので一旦パス。