作業フローを簡素化:miniwebtoolを検索。
追加
関連ツール
CSS Flexbox プレイグラウンドjavascriptは有効になっていますかSVGからReact/JSXへの変換器
ホームページ > ウェブマスターツール > TypeScriptプレイグラウンド
 

TypeScriptプレイグラウンド

ブラウザ上でTypeScriptの記述、コンパイル、型チェック、実行が可能です。リアルタイム診断、JavaScript出力、厳格モード(strict mode)制御、クイックサンプル、サンドボックス化されたコンソール機能を備えています。

TypeScriptプレイグラウンド
ブラウザ コンパイラ コックピット
TypeScript コンパイラを読み込み中
クイック サンプル:
TS playground.ts コンパイラを待機中
0 行
コンパイラ オプション
コンパイル パイプライン
TS
ソース
TypeScript テキストを解析
契約と推論を検証
JS
出力
JavaScript 出力を生成
実行
サンドボックス コンソール限定
ℹ コンパイルはブラウザ内で実行されます。コンパクトな組み込み型ライブラリはスニペットには便利ですが、プロジェクト固有のパッケージ型はローカルの TypeScript 環境で管理してください。

Embed TypeScriptプレイグラウンド Widget

コンパイラー出力
TypeScript を待機中
型ステータス
待機中
診断
0
出力サイズ
0 B
コンパイル時間
0 ms
コンパイラーを読み込み中です。最初のコンパイル後に診断がここに表示されます。
サンドボックス実行出力
コンパイルされた JavaScript を実行すると、コンソール出力がここに表示されます。
'; 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 = '
TypeScript コンパイラーを読み込めませんでした
ネットワーク接続またはコンテンツブロッカーを確認してから、ページを再読み込みしてください。
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
📲

MiniWebtoolアプリをインストール

ホーム画面に追加して即座にアクセス — 無料、高速、ダウンロード不要。

           

もっと速く、広告なしがいいですか?

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 を使用します。信頼できないコードの実行は避け、実際のアプリケーションコードは通常の開発環境内でテストしてください。

このコンテンツ、ページ、またはツールを引用する場合は、次のようにしてください:

"TypeScriptプレイグラウンド"(https://MiniWebtool.com/ja/typescriptプレイグラウンド/) MiniWebtool からの引用、https://MiniWebtool.com/

by miniwebtool team. Updated: 2026-05-23

ウェブマスターツール:

おすすめ:

InstagramユーザーID検索弧長電卓パーセント増加電卓パーセンテージ減少電卓不可視文字除去ツールランダムカラージェネレーターMACアドレス検索円錐展開図テンプレートジェネレーター画像分割ツールHEX電卓クロスワードパズルメーカーパーセント誤差電卓フィートとインチからセンチメートルへのコンバーター水星逆行カレンダー英単語ランダム生成ツールエンジェルナンバー電卓ランダム超能力ジェネレーターシグマ記法電卓 総和合計電卓標準偏差電卓 - 高精度平方完成電卓ランダム誕生日ジェネレーター動画を結合売上総利益率電卓YouTubeチャンネル統計筆算割り算電卓動画を逆再生土星回帰電卓ai句読点追加ASCIIコード表CAGR電卓動画を回転番号を並べ替える私のIPアドレスは何ですか相関係数計算機オンライン句読点削除ツール関数電卓FPSコンバーターマン・ホイットニーのU検定計算機MP3ルーパー対数電卓war電卓相対標準偏差電卓モジュロ電卓手数料電卓ビンゴカードジェネレーター💧 露点電卓楕円円周電卓ランダム絵文字ジェネレーターマスターナンバー電卓デシベル (dB) 電卓ランダムトーナメント表作成ツール空の行を削除するHEXコンバーター中央値電卓変化率電卓BUN対クレアチニン比電卓ボルト締付トルク計算機血糖値コンバーター逆テキスト熱膨張計算機圧力電卓t検定電卓ビデオ速度を調整ボウリングスコア計算機kva計算機角速度計算機ランダム名前ジェネレーター分数電卓オーディオ スプリッター指数電卓-高精度SRT 時間シフト 電卓コラージュメーカー迷路ジェネレーターlog-base-2電卓コラッツ予想電卓加速度電卓労働時間計算ツールFIP電卓センチメートルからフィートとインチへのコンバーターAIテキストヒューマナイザーサッカーxg期待ゴール電卓年の日電卓 - 今日は今年の何日目fena電卓平方根電卓GIFメーカーCRC32チェックサム電卓ランダム日付ジェネレーター画像回転ツール太陽位置計算機小数時間から普通の時間へのコンバーターランダム時刻ジェネレータージニ係数電卓動画から画像抽出ツール桁数電卓比率電卓分散電卓 高精度中間日計算機XMLバリデーター求人検索VTTからtxtへのコンバーター外れ値電卓水泳ペース計算機パレットジェネレーター三角関数グラフ作成ツール確率分布電卓FacebookユーザーID検索🖱️ クリックカウンターピタゴラスの定理電卓ベーカーズパーセント電卓ランダムポーカーハンドジェネレーター文字数による改行車両重量配分計算機TikTok収益計算ツール積分電卓筆算足し算・引き算計算機角度変換ツール沸点計算ツールホームランの打席電卓ワイヤーゲージ電卓停止距離計算機愛の相性電卓赤ちゃんのミルク量計算ビデオ反転四次方程式計算機比較分数電卓🔊 トーンジェネレーターバイナリ電卓ビデオをループ再生ピザ生地計算機ランニングペース電卓上下反転テキストジェネレーター円錐台電卓変動係数電卓平均寿命電卓密度電卓🌡️ 暑さ指数電卓SRTからTXTへの変換ツールスリザーリンクパズルジェネレーター配管流量電卓SHA256 ハッシュジェネレーターTwitch収益計算ツールヒジュラ暦変換器パーセント成長率電卓周波数波長変換ツール日割り家賃計算最小公倍数電卓正多角形電卓SRT結合Zalgoテキストジェネレーターじゃんけんジェネレーターグレイコード・バイナリ変換電卓取り消し線テキスト生成ツール積の記号電卓 (Π パイ記法)IPアドレスから16進数への変換YouTubeショート収益化計算ツールマルコフ連鎖定常分布電卓標準誤差電卓F検定・F分布電卓HTMLからテキストコンバータ水分補給計算機階段電卓FNV-1a ハッシュジェネレーターpsiからkPaへのコンバーターTwitter/X タイムスタンプ変換器カラー反転ツールランダムクレジットカードジェネレーター二乗平均平方根電卓油圧シリンダー推力計算機番号ランダマイザー音速計算機10進数からBCDへのコンバーター並列抵抗電卓歩数距離変換電卓行番号を追加配当利回り電卓重複行削除ツール魔方陣ジェネレーターANC電卓mp3リバーサーバーコードジェネレーターランダムRPGキャラクタージェネレーター太陽・月・上昇星座電卓 🌞🌙✨小文字生成器 ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾滑車システム計算機アナグラム生成器エラー関数電卓パスワード強度テスター平均電卓-高精度斜辺電卓発音IPA変換ツール音節カウンターCPM 電卓PSIからbarへの変換器タンジェント電卓動画圧縮子供のBMIパーセンタイル計算機猫カロリー電卓atan2電卓👙 ブラサイズ電卓プール塩量計算機プール容量計算給湯器サイズ電卓エポキシ樹脂計算機手すり子間隔電卓巾木とトリムの電卓サイディング計算機デッキ用ステインの計算芝生の種計算機芝生電卓アスファルト電卓立方ヤード電卓アンテナ長計算機電線管充填率電卓直列並列コンデンサ電卓誘導リアクタンス計算機部屋の照明計算機ルクスからルーメン電卓ルーメンからワット変換器発電機サイズ計算機mAh Wh 変換器 電卓三相電力計算機アンペアからワット電卓ワットからアンペア電卓直列抵抗計算機摩擦計算機斜面計算機機械的倍率計算機波の速度計算機浮力電卓終端速度計算機ド・ブロイ波長計算機光子エネルギー計算機emc2電卓時間の遅れ計算機ケプラーの第三法則計算機脱出速度計算機万有引力計算機ベール・ランベルトの法則電卓ネルンストの式計算機浸透圧計算機沸点上昇電卓凝固点降下計算パーセント組成計算機規定度計算機質量モル濃度計算機pKa→Ka変換器ヘンダーソン・ハッセルバルヒ電卓理論収量計算機制限反応物計算機電子配置計算機インタラクティブ周期表AI授業計画ジェネレーターAIクイズ作成ツール引用ジェネレーター (APA/MLA/Chicago)出席率計算APスコア計算機ACTスコア計算機SATスコア電卓パーセンテージからCGPA変換器CGPAからパーセンテージへの変換器簡単採点ツール EZ Grader子育て費用計算機おむつサイズ電卓赤ちゃんの名前ジェネレーター赤ちゃんの目の色予測子供の身長予測ツールhcg倍加時間計算ツール体外受精出産予定日電卓着床計算ツール中国式性別予測カレンダーISO 8601 日付フォーマッターユリウス日変換器昼寝電卓月相電卓日の出&日の入り電卓世界時計日付ローマ数字変換電卓退職カウントダウンソブリエティ計算機ハーフバースデー計算機記念日計算機週番号計算機チップ分配計算機メールマーケティングROI電卓リード獲得単価計算機運転資本計算機限界利益計算機FIFO / LIFO 電卓安全在庫計算機発注点計算機経済的発注量EOQ電卓減価償却計算機ハンドメイド価格電卓卸売価格計算機Shopify利益計算機Amazon FBA 電卓eBay手数料計算機Etsy手数料計算機Stripe手数料計算機PayPal手数料計算機ベッティングオッズ変換器什一献金計算機ザカート計算機英国印紙税計算機HRA非課税計算ツールグラチュイティ計算機NPS計算機EPF電卓PPF計算機RD電卓SWP電卓グロスアップ計算機ローン比較電卓クレジット利用率計算ツールCDラダー電卓T-Bill米国短期国債電卓I Bond 電卓529大学積立計算機HSA電卓退職金計算機昇給計算機請求書作成ツール出張日当計算機走行距離手当計算機家賃値上げ計算機家賃適正額計算機乗り出し価格計算ツール車購入可能額計算機バイクローン計算機キャンピングカーローン計算ボートローン電卓土地ローン計算機建設ローン計算機金利のみ住宅ローン計算機バルーンローン計算機住宅ローンポイント計算機PMI電卓隔週住宅ローン返済額計算機ARM住宅ローン電卓VAローン計算機給与手取り計算機AI SQLクエリジェネレーターAI正規表現ジェネレーターAIデータ可視化ツールCSV貼り付けAIテキストトーン分析ツールAI履歴書アナライザーAI単位変換ツール自然言語AI謝罪文ジェネレーターAI 丁寧なお断り文ジェネレーターAI旅行日程ジェネレーターAI読書リストジェネレーターAIワークアウトプランジェネレーターAI献立ジェネレーターAIギフトアイデアジェネレーターAIレシピジェネレーター食材から奨学金ROI電卓大学費用計算機言語学習 流暢になるまでの学習時間電卓単語クイズ作成ツールコーネルノート作成ツール学習曲線電卓フラッシュカード間隔反復スケジューラーペイント色混合計算機タイル目地計算機シックスシグマ工程能力計算機youtubeサムネイルダウンローダーyoutube収益見積もりツール
×

私たちに好意を示し、3つの簡単な質問に答えてください

アンケートにご協力いただきありがとうございます。お寄せいただいた情報は、サービスの改善に役立てさせていただきます。

最初にどこで私たちについて聞いたのですか?

私たちのサイトでお気に入りのツールは何ですか?

その他の場合は、指定してください

このツールを友人にすすめる可能性はどのくらいありますか?

まったくそうではない非常に可能性が高い

ありそうなスコア: (1-10)