Softonic

tsconfig.json ジェネレーター

ステップ 1 / 2
結果

tsconfig.json には100を超えるコンパイラオプションがあり、TypeScriptのチュートリアルはどれも違う組み合わせを載せています。このジェネレーターは、ほとんどのプロジェクトで重要なものに絞りました。target、module、moduleResolution、jsx、定番のブールフラグ（strict、esModuleInterop、skipLibCheck など）、そして outDir/rootDir のフォルダ設定です。オプションを変えるたびにtsconfig.jsonのプレビューがライブ更新されます。プロジェクトのルートにコピーすれば、ボイラープレートにありがちな死んだオプションのないきれいな設定が手に入ります。

設定が作られる仕組み

  1. 1

    targetとmoduleを選ぶ

    tscが出力するJavaScriptのバージョン（ES2015からES2023、またはESNext）と、モジュールシステム（CommonJS、ES2015/ES2020/ES2022、ESNext、Node16、NodeNext）。

  2. 2

    moduleResolutionとJSXを決める

    Vite/webpackならbundler、モダンなNodeならnode16/nodenext、古い構成ならnodeやclassic。モダンReactならjsxをreact-jsxに。noneのままにすればキー自体が省かれます。

  3. 3

    フラグを切り替える

    strict、esModuleInterop、skipLibCheck、resolveJsonModule、allowJs、declaration、sourceMap、forceConsistentCasingInFileNamesをシンプルなチェックボックスで。

  4. 4

    フォルダを設定

    outDirとrootDirは./distと./srcがプリセット。includeとexcludeはsrc/**/*とnode_modules、distに固定です。

  5. 5

    生成されたtsconfigをコピー

    JSONプレビューはライブ更新。ワンクリックでコピーして、プロジェクトルートにtsconfig.jsonとして置くだけです。

このジェネレーターが書き出すオプション

オプション ここでのデフォルト 役割
target ES2022 出力されるJavaScriptのバージョン。ES2022は現行ブラウザとNodeで安全。古いターゲットはレガシー環境のみに。
module ESNext 出力のモジュール構文。Node ESMプロジェクトは NodeNext/Node16、レガシーNodeは CommonJS。
moduleResolution node インポートの解決方法。Vite/webpack/esbuildなら bundler、モダンNodeなら node16/nodenext を推奨。node（node10）は従来の挙動です。
jsx 省略 モードを選んだときだけ書き出されます。React 17+は react-jsx、バンドラーがJSXを変換するなら preserve。
strict true strict系チェックを一括で有効化。新規プロジェクトではオンのままに。
esModuleInterop true CommonJSパッケージからのデフォルトインポートを正しく扱えるようにします。
skipLibCheck true .d.ts ファイルの型チェックをスキップ。コンパイルが大幅に速くなり、実バグを隠すことはまれです。
forceConsistentCasingInFileNames true ディスク上のファイルと大文字小文字が違うインポートを拒否（macOSからLinuxへ移すと壊れる定番の原因）。
resolveJsonModule true import data from "./data.json" を可能にします。
allowJs false .js ファイルもコンパイル対象に。移行の途中で便利です。
declaration false .d.ts ファイルを出力。ライブラリを公開するときにオンに。
sourceMap false デバッグ用の .js.map ファイルを出力します。
outDir / rootDir ./dist / ./src コンパイル結果の出力先と、ソースの置き場所。
baseUrl "." 常に書き出されます。手で追加した paths ブロックがプロジェクトルートから解決されるようにするためです。

デフォルト出力そのまま

すべてデフォルトのままにすると、得られるファイルはちょうどこれです：

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

jsx に none 以外を選ぶと、compilerOptions に "jsx" エントリが追加されます。

strictモードが実際に有効にするもの

strict: true は傘となるフラグで、strict系のチェックをまとめて有効にします。含まれるのは noImplicitAny、strictNullChecks、strictFunctionTypes、strictBindCallApply、strictPropertyInitialization、noImplicitThis、useUnknownInCatchVariables、alwaysStrict などです。新規プロジェクトは全部オンで始めるべきです。後からstrictを効かせるのは骨が折れます。

よくある間違い

  • Node ESMプロジェクトに module: "CommonJS" を設定する。 package.json に "type": "module" があるなら、module も moduleResolution も NodeNext にしてください。
  • tsc をバンドラーとして使う。 tscはコンパイラ兼型チェッカーです。ビルドはVite/esbuild/SWC、型チェックは tsc --noEmit で。
  • すべてをコンパイルしてしまう。 include リストがないと、TypeScriptは見えるすべての .ts を拾います。生成される設定は常に include: ["src/**/*"] を書き、node_modules と dist を除外するので安心です。
  • 設定にない項目が必要になる。 このジェネレーターは意図的にミニマルです。lib、paths、isolatedModules、noEmit などのオプションは、ベースのファイルができてから手で足せば簡単です。

よくある質問

モノレポやマルチパッケージ構成なら、はい。共通オプションを持つベースファイルを1つ置き、各パッケージが “extends” で継承します。単一プロジェクトのリポジトリなら、生成されたもののような1枚のtsconfig.jsonのほうがシンプルです。

TypeScript 5.0で、Vite・webpack・esbuildでビルドするプロジェクト向けに導入されました。node16/nodenextのESM拡張子ルールを持ち込まず、バンドラーが実際に行うインポート解決を反映します。Nodeが直接実行するコードにはnode16かnodenextを使ってください。

専用のコントロールはありません。ただし生成ファイルは必ずbaseUrlを “.” に設定するので、そのすぐ下にpathsブロックを貼り付けられます。たとえば “@/*”: [“src/*”] とすれば、プロジェクトルートから解決されます。

通常は不要で、だからこそこのジェネレーターは書き出しません。targetが対応するライブラリ型のセットを暗黙に決めます。NodeプロジェクトでDOM APIやWebWorker型が必要といった特殊なケースだけ、手動で上書きしてください。

登録は不要で、何も保存されません。選択は設定プレビューの表示にだけ使われます。ステップ表示では選択内容がページURLにも入るため、完成した設定のブックマークや共有も簡単です。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます