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

meltedice

2020.04.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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 が実行できる

{
  // ...
  "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 用のファイルを型チェックから除外しています。

{
  "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 を上書きして全ファイルの型チェックをするようにしています。

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

package.json

次に package.json 内の型チェックをするコマンド type-check の中身、 tsc コマンドに --project tsconfig.all.json を付けます。これでデフォルトの設定ファイル tsconfig.json の代わりに tsconfig.all.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"
  },
  // ...