TypeScriptプレイグラウンド
ブラウザ上でTypeScriptの記述、コンパイル、型チェック、実行が可能です。リアルタイム診断、JavaScript出力、厳格モード(strict mode)制御、クイックサンプル、サンドボックス化されたコンソール機能を備えています。
ブラウザ上でTypeScriptの記述、コンパイル、型チェック、実行が可能です。リアルタイム診断、JavaScript出力、厳格モード(strict mode)制御、クイックサンプル、サンドボックス化されたコンソール機能を備えています。
'; updateStage('run', false); runnerEl.srcdoc = sandboxHtml; } function downloadJavaScript() { const blob = new Blob([jsOutputEl.value], { type: 'text/javascript;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'playground.js'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } function tidyIndents() { const tidied = sourceEl.value .replace(/\t/g, ' ') .split('\n') .map(function (line) { return line.replace(/\s+$/g, ''); }) .join('\n') .replace(/\n{4,}/g, '\n\n\n'); sourceEl.value = tidied; compileNow(); } function resetSource() { sourceEl.value = document.getElementById('tsplay-source').defaultValue; compileNow(); } sourceEl.addEventListener('input', scheduleCompile); sourceEl.addEventListener('scroll', function () { linesEl.scrollTop = sourceEl.scrollTop; }); sourceEl.addEventListener('keydown', function (event) { if (event.key === 'Tab') { event.preventDefault(); const start = sourceEl.selectionStart; const end = sourceEl.selectionEnd; sourceEl.value = sourceEl.value.slice(0, start) + ' ' + sourceEl.value.slice(end); sourceEl.selectionStart = sourceEl.selectionEnd = start + 2; scheduleCompile(); } }); document.querySelectorAll('[data-example]').forEach(function (button) { button.addEventListener('click', function () { const name = button.getAttribute('data-example'); if (EXAMPLES[name]) { sourceEl.value = EXAMPLES[name]; compileNow(); } }); }); document.querySelectorAll('.tsplay-result .tsplay-tab').forEach(function (tab) { tab.addEventListener('click', function () { setActiveTab(tab.getAttribute('data-tab')); }); }); [targetEl, moduleEl, strictEl, indexedEl, declarationsEl].forEach(function (control) { control.addEventListener('change', compileNow); }); compileBtn.addEventListener('click', compileNow); runBtn.addEventListener('click', runJavaScript); document.getElementById('tsplay-copy-source').addEventListener('click', function () { copyText(sourceEl.value, 'TypeScript'); }); document.getElementById('tsplay-copy-js').addEventListener('click', function () { copyText(jsOutputEl.value, 'JavaScript'); }); document.getElementById('tsplay-download-js').addEventListener('click', downloadJavaScript); document.getElementById('tsplay-format-btn').addEventListener('click', tidyIndents); document.getElementById('tsplay-clear-console').addEventListener('click', function () { consoleEl.textContent = 'コンパイルされた JavaScript を実行すると、コンソール出力がここに表示されます。'; }); document.getElementById('tsplay-clear-btn').addEventListener('click', resetSource); window.addEventListener('message', function (event) { if (!event.data || event.data.tsplayToken !== runnerToken) { return; } addConsoleLine(event.data.kind, event.data.value); }); function waitForCompiler(attempt) { syncEditorStats(); if (window.ts) { compilerStateEl.textContent = 'TypeScript ' + window.ts.version + ' 準備完了'; setStatus('ready', 'コンパイラー準備完了'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'コンパイラーが利用できません'; setStatus('error', 'コンパイラーが利用できません'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
広告ブロッカーにより広告を表示できません
MiniWebtool は広告収入によって無料で提供されています。このツールがお役に立った場合は、広告なしの閲覧とより多い毎日の利用回数のためにアップグレードするか、MiniWebtool.com を許可して再読み込みしてください。
この TypeScript Playground では、完全なプロジェクトを開かずにスニペットを素早くテストできます。ブラウザー内で TypeScript コンパイラーを実行し、行番号付きの型チェック診断を表示し、JavaScript を出力し、シンプルな出力をサンドボックス化されたコンソールで実行できます。
このツールは日常的な TypeScript チェック向けに設計されています。union 型の絞り込みの検証、ジェネリックなヘルパー型のテスト、コンパイラーターゲットの比較、strict モードの動作確認、TypeScript が出力する JavaScript のレビューなどに使えます。学習、コンパクトな例のデバッグ、回答の準備、プロジェクトに移す前の小さなリファクタリングの確認に役立ちます。
ブラウザーコンパイラーは、配列、文字列、レコード、JSON、console、タイマーなどの一般的な JavaScript オブジェクト向けにコンパクトな組み込み宣言ファイルを使用します。これによって、playground はスニペットに対して高速かつ自己完結的に保たれます。コードが React、Node.js、DOM API、またはパッケージ固有の宣言に依存している場合は、実際の tsconfig.json とインストールされた型パッケージを使用してプロジェクト内で最終結果を確認してください。
大きなコードベースから型エラーを切り分けたいとき、strict モードが診断をどのように変えるかを比較したいとき、TypeScript の概念をチームメイトに説明したいとき、または小さなスニペットが JavaScript にどのようにコンパイルされるかを確認したいときに playground を使用します。組み込みの例では、判別共用体、ジェネリックなレコードヘルパー、satisfies 演算子、意図的な型の間違いをカバーしており、問題のないコンパイラー状態と失敗するコンパイラー状態の両方を確認できます。
はい。ブラウザー内 TypeScript プログラムをビルドし、型エラー、構文エラー、コンパイラーオプションのメッセージを含むコンパイラーからの診断を報告します。
はい。主なコントロールは、JavaScript ターゲット、モジュール出力、strict モード、宣言ファイルの出力、noUncheckedIndexedAccess をカバーしています。
この playground は意図的にコンパクトな組み込み型ライブラリを使用しています。フレームワーク、DOM、Node.js、または npm パッケージの型については、ローカルのプロジェクト設定を使用してください。
ランナーは、簡単なスニペットにはサンドボックス化された iframe を使用します。信頼できないコードの実行は避け、実際のアプリケーションコードは通常の開発環境内でテストしてください。
このコンテンツ、ページ、またはツールを引用する場合は、次のようにしてください:
"TypeScriptプレイグラウンド"(https://MiniWebtool.com/ja/typescriptプレイグラウンド/) MiniWebtool からの引用、https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
TypeScriptプレイグラウンドを使用する場合は、次のコードをコピーして貼り付け、このツールをリンクすることを検討してください: