React + TypeScript で Dev Server が関係ないファイルの TypeError で止まらないようにする

React + TypeScript で開発をしていると、型のありがたさを感じると同時に「そこのエラーは大目に見て」と感じるときも出てきます。 例えば yarn start で立ち上げた Dev Server が、テストや Storybook 用のコード内の型エラーで止まってしまう(バックトレースが表示されてしまう)時など。

そんなときに、全ファイルの型チェックは行いつつ、Dev Server、テスト、Storybook はもうちょっとゆるく動くようにする方法を説明します。

※ TypeScript は ECMAScript の上位互換で、型まわりのコードを取り除けば基本的に同じです
※ 型関係のコードが取り除かれた後の ECMAScript(JavaScript) のコードにエラーがなければそのまま動いてしまいます
※ 動くのならそのまま動いて欲しい、特にリファクタリング中などは

環境

• React 16.13.1
• TypeScript 3.8.3
• Storybook 5.3.0

この記事での前提

• npx creact-react-app my-app --template typescript で作成されたプロジェクト
• package.joson に以下のように設定がされていて、 yarn start yarn test yarn storybook が実行できる

package.json

{
  // ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom --watchAll=false",
    "test:coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
    "test:watch": "react-scripts test --env=jsdom --watch",
    "type-check": "tsc",
    "type-check:watch": "tsc --watch",
    "storybook": "start-storybook -p 9000 -s public"
  },
  // ...

※ ↑を元に後で変更します

やりたいこと

• 型チェック用のコマンド (yarn type-check) では TypeScript の型エラーは全ファイル分検出する
• Dev Server (yarn start) ではテストや Storybook のファイル内のエラーは無視する
• 自動テスト (yarn test) ではテストや Storybook のファイル内のエラーは無視する
  • 型はあとで直すとして、テストが壊れていないことを確認する方に専念して欲しい
• Storybook (yarn storybook) ではテストや Storybook のファイル内のエラーは無視する
  • 型はあとで直すとして、デザインが壊れていないことを確認させて欲しい

イメージ:

src/
  App.tsx
  components/
    molecules/
      Item.tsx                 // 常に型チェック (tsconfig.all.json)
      Item.spec.tsx            // yarn type-check でのみ型チェック
      Item.stories.tsx         // yarn type-check でのみ型チェック
    organisms/
      ItemList.tsx             // 常に型チェック (tsconfig.all.json)
      ItemList.spec.tsx        // yarn type-check でのみ型チェック
      ItemList.stories.tsx     // yarn type-check でのみ型チェック
    pages/
      ItemListPage.tsx         // 常に型チェック (tsconfig.all.json)
      ItemListPage.spec.tsx    // yarn type-check でのみ型チェック
      ItemListPage.stories.tsx // yarn type-check でのみ型チェック
  modules/
    index.ts                   // 常に型チェック (tsconfig.all.json)
    item.spec.ts               // yarn type-check でのみ型チェック
tsconfig.json
tsconfig.all.json

ゴール

• 次のコマンドではテストや Storybook 以外のコードの TypeScript の型エラーを検出
  • yarn start
  • yarn test
  • yarn storybook
• 次のコマンドでは全ファイルの TypeScript の型エラーを検出
  • yarn type-check

やること

TypeScript の設定ファイルを tsconfig.json と tsconfig.all.json の2つ用意します。

tsconfig.json

メイン実装コードのみ対象の TypeScript の設定。 exclude でテストと Storybook 用のファイルを型チェックから除外しています。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "typeRoots": ["node_modules/@types", "typings"]
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.spec.ts",
    "src/**/*.spec.tsx",
    "src/**/*.stories.tsx"
  ]
}

tsconfig.all.json

テストや Storybook のコードも対象の TypeScript の設定。 extends で tsconfig.json の設定を引き継ぎつつ、除外ルールの exclude を上書きして全ファイルの型チェックをするようにしています。

tsconfig.all.json

{
  "extends": "./tsconfig",
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json

次に package.json 内の型チェックをするコマンド type-check の中身、 tsc コマンドに --project tsconfig.all.json を付けます。 これでデフォルトの設定ファイル tsconfig.json の代わりに tsconfig.all.json を使って、全ファイルの型チェックをしてくれるようになります。

package.json

{
  // ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom --watchAll=false",
    "test:coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
    "test:watch": "react-scripts test --env=jsdom --watch",
    "type-check": "tsc --project tsconfig.all.json",
    "type-check:watch": "tsc --project tsconfig.all.json --watch",
    "storybook": "start-storybook -p 9000 -s public"
  },
  // ...

設定完了

これで次の3つのコマンドでは、直接の動作に関係のないテストや Storybook のコードの型エラーが無視されます。

yarn start
yarn test
yarn storybook

次のコマンドで全ファイルの TypeScript の型エラーを検出できます。

yarn type-check

参考

• tsconfig.json · TypeScript
• tsconfig.json | TypeScript 日本語ハンドブック | js STUDIO
• Create React App | Getting Started | Creating a TypeScript app