TypeScript 1.6 で JSX に対応するみたいです。1.5 がリリースされたばかりですが、すでに試せるみたいなので React を TypeScript から使ってみます。

インストール

普通に npm でインストールすると 1.5 が入るのでバージョンを指定します。 React を使うために Browserify もインストールしておきます。

React の方定義ファイルは dtsm でインストールします。

$ npm install -g typescript@next browserify dtsm
$ npm install -D react
$ dtsm init
$ dtsm install --save react

コード

拡張子は .tsx で保存します。

// app.tsx

import * as React from 'react';

const name: string = 'JSX';

class App extends React.Component<any, any> {
    render() {
        return (
            <div>Hello, {name}!</div>
        );
    }
}

React.render(<App />, document.body);

JSX と TypeScript の型チェックの両方を使うことができます。

これをコンパイルするための設定を tsconfig.json に書いていきます。

{
    "compilerOptions": {
        "jsx": "react",
        "module": "commonjs",
        "noEmitOnError": true,
        "outDir": "tmp",
        "target": "ES5"
    },
    "files": [
        "a.tsx",
        "typings/bundle.d.ts"
    ]
}

ポイントは "jsx": "react" の部分です。これを指定すると JSX を React 用に変換してくれます。ちなみに "react" ではなく "preserve" を指定すると結果の JavaScript に JSX がそのまま残ります。

コンパイル

tsc で変換した JavaScript を browserify でもう一度変換します。 tsify という Browserify プラグインもあるのですが 1.6 には対応していませんでした。

$ tsc
$ browserify -o bundle.js tmp/a.js

これで bundle.js ができます。

表示する HTML をテキトーに用意します。

<!DOCTYPE html><body><script src="bundle.js"></script></body>

これを開くと Hello, JSX! と表示されるはずです。

まとめ

  • TypeScript 1.6 で JSX に対応する
  • --jsx react で JSX を React 用に変換する
  • 拡張子は .tsx にする