TypeScriptプレイグラウンド

この TypeScript Playground では、完全なプロジェクトを開かずにスニペットを素早くテストできます。ブラウザー内で TypeScript コンパイラーを実行し、行番号付きの型チェック診断を表示し、JavaScript を出力し、シンプルな出力をサンドボックス化されたコンソールで実行できます。

この TypeScript Playground でできること

このツールは日常的な TypeScript チェック向けに設計されています。union 型の絞り込みの検証、ジェネリックなヘルパー型のテスト、コンパイラーターゲットの比較、strict モードの動作確認、TypeScript が出力する JavaScript のレビューなどに使えます。学習、コンパクトな例のデバッグ、回答の準備、プロジェクトに移す前の小さなリファクタリングの確認に役立ちます。

TypeScript コンパイラーの使い方

1. エディターに TypeScript を貼り付けるか、クイック例を選択します。
2. JavaScript ターゲットとモジュール形式を選択します。
3. より厳格な診断が必要な場合は、strict モードとオプションのインデックスアクセスチェックを有効にします。
4. コンパイルと型チェックをクリックするか、自動コンパイルを有効のままにしてリアルタイムのフィードバックを受け取ります。
5. 診断を確認し、出力された JavaScript を調べてから、サンドボックス化されたコンソールで簡単なスニペットを実行します。

型チェックに関する注意事項

ブラウザーコンパイラーは、配列、文字列、レコード、JSON、console、タイマーなどの一般的な JavaScript オブジェクト向けにコンパクトな組み込み宣言ファイルを使用します。これによって、playground はスニペットに対して高速かつ自己完結的に保たれます。コードが React、Node.js、DOM API、またはパッケージ固有の宣言に依存している場合は、実際の tsconfig.json とインストールされた型パッケージを使用してプロジェクト内で最終結果を確認してください。

例とユースケース

大きなコードベースから型エラーを切り分けたいとき、strict モードが診断をどのように変えるかを比較したいとき、TypeScript の概念をチームメイトに説明したいとき、または小さなスニペットが JavaScript にどのようにコンパイルされるかを確認したいときに playground を使用します。組み込みの例では、判別共用体、ジェネリックなレコードヘルパー、satisfies 演算子、意図的な型の間違いをカバーしており、問題のないコンパイラー状態と失敗するコンパイラー状態の両方を確認できます。

• union 型を API レスポンスモデルに追加する前に検証します。
• アプリケーション全体のビルドを待たずにジェネリックなヘルパーをテストします。
• ターゲットまたはモジュールオプションを変更したときに出力された JavaScript を確認します。
• TypeScript の診断のコンパクトな再現を共有します。

よくある質問

このツールは TypeScript の型をチェックしますか？

はい。ブラウザー内 TypeScript プログラムをビルドし、型エラー、構文エラー、コンパイラーオプションのメッセージを含むコンパイラーからの診断を報告します。

TypeScript コンパイラーのオプションを変更できますか？

はい。主なコントロールは、JavaScript ターゲット、モジュール出力、strict モード、宣言ファイルの出力、noUncheckedIndexedAccess をカバーしています。

ライブラリの型が見つからないのはなぜですか？

この playground は意図的にコンパクトな組み込み型ライブラリを使用しています。フレームワーク、DOM、Node.js、または npm パッケージの型については、ローカルのプロジェクト設定を使用してください。

JavaScript ランナーは安全ですか？

ランナーは、簡単なスニペットにはサンドボックス化された iframe を使用します。信頼できないコードの実行は避け、実際のアプリケーションコードは通常の開発環境内でテストしてください。