Reactガイドを読んでいくその108

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

静的型チェック

TypeScript コンパイラの設定

装備を買っても装備しないと意味がないのと一緒で、TypeScriptを導入してもコンパイラの設定をしないと意味がありません。
コンパイラの設定はtsconfig.jsonで定義し、そのためにコマンドを実行して生成してあげる必要がある。
Yarnとnpmそれぞれでコマンドがあります。
yarn run tsc --init

npx tsc --init

生成されたtsconfig.jsonを見ていくといろいろなオプションが書いてあるが、rootDirとoutDirに注目する。
本来のコンパイラはTypeScriptのファイルからJavaScriptのファイルを生成する。
このままでは既存のコードと生成されたコードが混合してしまうので、それを避けたい。

そのために以下の二つの手順を行う。
　・ディレクトリ構成の変更
　・tsconfig.jsonの編集

ディレクトリ構成の変更の一例

├── package.json
├── src
│   └── index.ts
└── tsconfig.json

tsconfig.jsonの編集

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",
    "outDir": "build"
    // ...
  },
}

上記を実行した後にbuildをすると生成したコードはbuildディレクトリに格納されるようになる。

今日はここまで。