# React　TypeScriptアプリの実行方法
create-react-appだけでは、TypeScriptは動作しない。
動作に必要な項目をまとめる。
## ファイル構成
* todoappフォルダ（アプリケーション上のroot）
* srcフォルダ
* 各種ソースコード
* publicフォルダ
* node_modulesフォルダ
* .binフォルダ
* **tsc**
* **tsconfig.json**
* @typesフォルダ
* **react**
* **react-dom**
* package.json**→確認**
* **tsconfig.json→実行時に作成される**
* package-lock.json
* .gitignore
* README.md
* yarn.lock

（以下の項目:devが付くファイルはローカルインストールのファイルを表す。）
## 1. TypeScriptをインストールする
TypeScript及び関連のモジュールをインストールする。
1. package.jsonを開き、(dev)Dependenciesの項目にtypescriptの表記があるかを確認する。
2. typescriptが存在しない場合、todoappフォルダからcmdでコマンドプロンプトを開き、"npm i typescript ts-loader --save --also=dev"と入力して実行する。
3. TypeScriptのインストールが完了したら、再びpackage.jsonを開き、typescript表記を確認する。

## 2. @types/react, @types/react-domをインストールする
Reactの型定義ファイルをインストールする。
1. 先ほどのコマンドプロンプトから、npm i @types/react --save --also=dev を実行し、@types/reactをインストールする。
2. 同様にnpm i @types/react-dom --save --also=devを実行し、@types/react-domをインストールする。

## 3. tsconfig.jsonを作成・編集する
TypeScript→JavaScriptに変換するために必要なjsonファイルを作成する。
1. cdで./node_modules/.binに移動する。
2. tsc --initと入力し、tsconfig.jsonを作成する。
（追記：上記手順でうまくいかない時はフォルダを元の位置に戻し、npx tsc --initを実行する）
4. tsconfig.jsonに適切な編集を追加する。主な記述点は以下の通り。

{
    "compilerOptions":{
        "target":"es5",
        "module":"ES2015",//ECMAScriptのバージョン。const等を利用する際はES2015以降に設定する。
        "jsx":"react",//Reactの変換
        "sourceMap":true, //変換対照表の作成
        "outDir":"./dist/"//JavaScriptファイルの出力先
    }
}

## 4. yarn startで実行する
上記1～3までの準備ができたら、yarn startで実行する。
自動的にファイルがJavaScriptに変換されて実行される。

###### tags: `React`, `トリセツ`