React
TypescriptでのReactJSの使用

Typescriptで書かれたReactJSコンポーネント

実際、ReactJSのコンポーネントはTypescriptでfacebookの例のように使うことができます。 'jsx'ファイルの拡張子を 'tsx'に置き換えてください：

//helloMessage.tsx:
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

しかし、Typescriptの主な機能（静的型チェック）をフルに活用するためには、

1）React.createClassの例をES6に変換するクラス：

//helloMessage.tsx:
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);

2）次に、小道具と州のインターフェースを追加する：

interface IHelloMessageProps {
    name:string;
}

interface IHelloMessageState {
  //empty in our case
}

class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {
  constructor(){
    super();
  }  
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

プログラマが小道具を渡すことを忘れた場合、Typescriptはエラーを表示します。または、インタフェースに定義されていない小道具を追加した場合。

Typescriptのステートレスなリアクションコンポーネント

それらの小道具の純粋な機能であり、内部状態を必要としない反応コンポーネントは、標準クラス構文を使用する代わりに、JavaScript関数として記述することができます。

import React from 'react'

const HelloWorld = (props) => (
    <h1>Hello, {props.name}!</h1>
);

React.SFCクラスを使ってReact.SFCで同じことができます：

import * as React from 'react';

class GreeterProps {
   name: string
}

const Greeter : React.SFC<GreeterProps> = props =>
    <h1>Hello, {props.name}!</h1>;

なお、名前React.SFC別名ですReact.StatelessComponentのいずれかを使用することができますので、。

インストールとセットアップ

ノード・プロジェクトでreactとtypescriptを使用するには、最初にnpmで初期化されたプロジェクト・ディレクトリーを持っていなければなりません。 npm initディレクトリを初期化するには

npmまたは糸での取り付け

次のようにしてnpmを使ってReactをインストールすることができます：

npm install --save react react-dom

FacebookはYarnという独自のパッケージマネージャをリリースしました。これはReactのインストールにも使用できます。 Yarnをインストールしたら、次のコマンドを実行するだけです：

yarn add react react-dom

Reactをnpm経由でインストールした場合とまったく同じ方法で、プロジェクトでReactを使用することができます。

Typescript 2.0以降での反応型定義のインストール

typescriptを使用してコードをコンパイルするには、npmまたはyarnを使用して型定義ファイルを追加またはインストールします。

npm install --save-dev @types/react @types/react-dom

または、糸を使用して

yarn add --dev @types/react @types/react-dom

Typescriptの古いバージョンでの反応型定義のインストール

tsdという別のパッケージを使用する必要があります

tsd install react react-dom --save

Typescript構成の追加または変更

JavaScriptとhtml / xmlを混在させたJSXを使用するには、typescriptコンパイラの設定を変更する必要があります。プロジェクトのtypescript設定ファイル（通常はtsconfig.jsonというtsconfig.json ）に、JSXオプションを次のように追加する必要があります。

"compilerOptions": {
    "jsx": "react"
},

そのコンパイラオプションは、基本的にtypescriptコンパイラに、コード内のJSXタグをjavascript関数呼び出しに変換するように指示します。

typescriptコンパイラがJSXをプレーンなjavascript関数呼び出しに変換するのを避けるには、

"compilerOptions": {
    "jsx": "preserve"
},

ステートレスおよびプロパティレスコンポーネント

状態のない最も簡単な反応コンポーネントとプロパティは、次のように記述できます。

import * as React from 'react';

const Greeter = () => <span>Hello, World!</span>

しかし、そのコンポーネントはthis.propsアクセスすることができません。 this.props 、typescriptはそれが反応コンポーネントかどうかを知ることができないからです。その小道具にアクセスするには、以下を使用します。

import * as React from 'react';

const Greeter: React.SFC<{}> = props => () => <span>Hello, World!</span>

コンポーネントに明示的にプロパティを定義していない場合でも、すべてのコンポーネントには本来子があるため、 props.childrenアクセスできるようになりました。

ステートレスとプロパティレスのコンポーネントのもう1つの同様の優れた使い方は、単純なページテンプレートの使用です。次は、プロジェクト内に仮想のContainer 、 NavTop 、およびNavBottomコンポーネントが既に存在すると仮定すると、単純なPageコンポーネントのNavBottomです。

import * as React from 'react';

const Page: React.SFC<{}> = props => () => 
    <Container>
        <NavTop />
        {props.children}
        <NavBottom />
    </Container>

const LoginPage: React.SFC<{}> = props => () =>
    <Page>
        Login Pass: <input type="password" />
    </Page>

この例では、 Pageコンポーネントは後で他の実際のページで基本テンプレートとして使用できます。