LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

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について言及したサイトや記事が見当たらなかったので、今回記事にしてみました。

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


:hatched_chick:Twitterもやっています。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0