概要

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は使う予定が無いので一旦パス。