Hapicode - プログラミング技術ブログ

# Jsconfig と Tsconfig

JavaScript で開発する際に使う jsconfig.json と Typescript 開発に使う tsconfig.json について、調べてまとめました。

# JSConfig.json とは

jsconfig.json ファイルは javascript のコード補完を手伝います。Visual Studio Code で Javascript 開発するなら、VSCode は設定を推薦します。jsconfig.json ファイルがあれば、開発範囲と開発ルールを明示するので、VSCode がプログラムのエラーやルール違反を教えてくれます。

jsconfig.json ファイルの例

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["resources/js/*"],
      "@Components/*": ["resources/js/Components/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "public"]
}

jsconfig compilerOptions オプション

オプション 説明
noLib include しないライブラリ
target ライブラリ指定 値：es3 es5 es6 es2015 es2016 es2017 es2018 es2019 es2020 esnext
module モジュール指定 値：amd commonJS es2015 es6 esnext none system umd
moduleResolution モジュールインポート方法 値： node classic
checkJs javascript type をチェックする
experimentalDecorators デコレーターの実験的なサポート
allowSyntheticDefaultImports コンパイルエラーを回避
baseUrl プロジェクトルート
paths パス作成

# tsconfig.json とは

Node.js はそれ自身では TypeScript をサポートしているわけではないため、TypeScript の導入をする時は TypeScript の設定ファイルである tsconfig.json が必要です。
tsconfig.json のファイルは、ルートファイルやプロジェクトをコンパイルするために必要なコンパイラオプションを指定します。
JavaScript プロジェクトでは、代わりに jsconfig.json ファイルを使用できます。このファイルはほぼ同じように機能しますが、JavaScript 関連のコンパイラフラグがデフォルトで有効になっています。

tsconfig.json ファイルの例

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "rootDir": "./src",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "./dist",
    "importsNotUsedAsValues": "error",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noPropertyAccessFromIndexSignature": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ],
  "target": "es5",
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

# Target オプション

TypeScript は最終的に JavaScript にコンパイルされます。Target オプションは出力する JavaScript のバージョンを指定します。
target が ES5 以下である場合、アロー関数() => {}は等価な function 式へ変換されます。

Name Supported Target 利用可能な API（一部）
Node 8 ES2017 Object.entries、Object.values、date.formatToParts
Node 10 ES2018 async iterables、promise.finally、rexexp.groups
Node 12 ES2019 array.flat、array.flatMap、string.trimStart
Node 14 ES2020 string.matchAll
Node 16 ES2021 string.replaceAll

# lib オプション

target を指定すれば必要なライブラリは自動的に追加されますが、個別でライブラリ追加や、ライブラリを除外する場合に lib オプションを使います。

{
  "compilerOptions": {
    "target": "es2018",
    "lib": [
      "es2018",
      "esnext.AsyncIterable",
      "esnext.Array",
      "esnext.Intl",
      "esnext.Symbol"
    ]
  }
}

# module オプション

出力される JavaScript がどのようにモジュールを読み込むか指定します。

# commonjs オプション

バックエンド(サーバーサイド)で使われているモジュール読み込みの解決方法です。

# tsconfig base

TSConfig で推奨されるベース設定

tsconfig/bases (opens new window)

# tsconfig推薦
yarn add --dev @tsconfig/recommended

# React
yarn add --dev @tsconfig/create-react-app

// tsconfig推薦
"extends": "@tsconfig/recommended/tsconfig.json"

// React
"extends": "@tsconfig/create-react-app/tsconfig.json"
2022-09-09
  • javascript

同じタグを持つ記事をピックアップしました。