1. TSConfig basesとは？

各環境に最適化された基本的なtsconfig.jsonの設定内容のpackageです。

2022/4/25現在、下記の環境に合わせた設定内容が用意されています。

Recommended
Create React App
Cypress
Deno
Docusaurus v2
ESM
Next.js
Node 10
Node 12
Node 14
Node 16 + ESM + Strictest
Node 16 + Strictest
Node 16
Node 17
Node 18
Nuxt
React Native
Remix
Strictest
Svelte
Taro
Vite React

2. 実際に設定してみる

基本的には公式の記載のとおりですが、実際の設定内容を見てみましょう。

Create React Appで私が実際に設定している内容です。

tsconfig.jsonを設定する前に、必要なpackageをインストールします。

npm install --save-dev @tsconfig/create-react-app
yarn add --dev @tsconfig/create-react-app

tsconfig.jsonの内容は下記の通り。

tsconfig.json

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["components/*"],
      "layout/*": ["layout/*"],
      "lib/*": ["lib/*"],
      "redux/*": ["redux/*"],
      "style/*": ["style/*"]
    }
  },
  "include": ["src/**/*"]
}

どうですか？　大分すっきりしてますよね。

おすすめ設定を一発で読み込めることにより、tsconfig.jsonを作成する時間の短縮や、設定誤りによるミス防止につながります。

ちなみに、@tsconfig/create-react-app/tsconfig.jsonの中身は下記のようになっています。

create-react-app/tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Create React App",


  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "target": "es5",

    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true
  }
}

参照URL：https://github.com/tsconfig/bases/blob/main/bases/create-react-app.json

99. おわりに

意外とTSConfig basesについて言及したサイトや記事が見当たらなかったので、今回記事にしてみました。

知らなかった人は是非活用してみてほしいです。

Twitterもやっています。

よかったらフォローお願いします。