TSConfig basesを使ってtsconfig.jsonをぱぱっと設定する

TypeScriptを使って開発するにはtsconfig.jsonの設定が必須です。

ただ、tsconfig.json迷わず書けますか？

この記事では、tsconfig.json苦手マンの筆者がよく使うTSConfig basesを紹介します。

1. TSConfig basesとは？

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

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

1. Recommended
2. Create React App
3. Cypress
4. Deno
5. Docusaurus v2
6. ESM
7. Next.js
8. Node 10
9. Node 12
10. Node 14
11. Node 16 + ESM + Strictest
12. Node 16 + Strictest
13. Node 16
14. Node 17
15. Node 18
16. Nuxt
17. React Native
18. Remix
19. Strictest
20. Svelte
21. Taro
22. 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もやっています。

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