プログラミング言語を整える
中級TypeScript を整える。
＝ 型検査 → JavaScript への変換 → 実行の3段階を見せる——JS では実行まで分からない間違いが「書いた時点」で赤くなる
サンプルコード（クリックでエディタに挿入）
① 型検査の結果 — TYPE CHECK
「実行」を押すと、まず型検査の結果がここに出ます。
② JavaScript への変換結果 — TRANSPILE
薄い色の部分は、変換後の JavaScript には残らない箇所（型注釈・interface・型引数など）。
まだ変換していません。
③ 変換後を実行した出力 — RUN
まだ実行していません。
TypeScript は「実行を止める仕組み」ではない。
型エラーがあっても、②の変換と③の実行は必ず行われます。TypeScript がしているのは「実行する前に、間違いを指摘すること」だけです。
- ①
型検査 — 書いた時点で指摘する
サンプルの②〜⑤（
/javascript/と同じ題材）は、型注釈のおかげで「実行するまで分からない」間違いが「書いた時点」で分かるようになります。 - ②
変換 — 型情報を取り除くだけ
型注釈・
interface・型引数（<T>）は、変換後の JavaScript には一切残りません。実行時に何かを足しているわけではなく、ただ取り除いているだけです（enumは例外で、実体が残ります）。 - ③
実行 — 型エラーがあっても止まらない
このページでは型エラーが出ても③の実行まで必ず進みます（普段の開発環境ではビルド設定次第で止めることもできますが、それは別の仕組みです）。
JavaScript と TypeScript の違い
同じサンプルコードを /javascript/ で実行すると、上の②〜⑤の間違いが「実行して初めて」分かる様子を見比べられます。
| 観点 | JavaScript | TypeScript |
|---|---|---|
| 型の指定 | 無い（実行時に値を見て決まる） | 書ける（: string 等の型注釈、interface、ジェネリクス） |
| 間違いに気づく時点 | 実行した時（その行を通ったとき） | 書いた時（エディタ上で赤い波線・上の①型検査） |
| 実行の仕組み | そのまま実行される | 型注釈を取り除いた JavaScript に変換してから実行（型エラーがあっても実行は止まらない） |
| 学習コスト | 低い（すぐ書き始められる） | やや高い（型・interface・ジェネリクスの書き方を覚える分） |
| 向いている場面 | 小さなスクリプト・すぐ試したいコード | 複数人・長期運用するコード（間違いを早期発見したい場面） |
同じコードを JavaScript で試すと、上の表の間違いが「実行して初めて」分かる様子を確認できます。 同じコードを JavaScript で試す（/javascript/）
このページについて
型検査には typescript.js（約9MB） と、型定義ファイル（lib、約0.4MB）を使います。 実行には QuickJS（WASM、約1MB） を使います。ブラウザ本体のエンジンではなく別のエンジンで動かしているため、DOM・fetch は使えません。 無限ループを書いても一定時間で処理を打ち切るので、ページが固まることはありません。
🌐 このページを開いただけでは外部通信は発生しませんが、「実行」を押した最初の1回だけ、
TypeScript の型検査環境（typescript.js 5.9.3・型定義ファイル一式）と JavaScript の実行環境（QuickJS 0.31.0）を配信元の
cdn.jsdelivr.net から取得します。
これはプログラムを受け取るだけの通信で、あなたが書いたコードや実行結果が送られることはありません。
ただし通信である以上、配信元にはお使いの回線の IP アドレスが見えます。
「入力は端末から出さない」という当サイトの原則に関わる点なので、隠さずに書いておきます。
送信ゼロ（書いたコードと実行結果はどこにも送信されません）。
このツールについて
TypeScript は「実行を止める仕組み」ではなく「実行する前に指摘する仕組み」です。型検査 → JavaScript への変換 → 実行、の3段階を必ず見せることで、型エラーがあっても変換・実行は進むことを体験できます。
TypeScript の型検査 → JS への変換 → 実行を3段階すべて見せる Playground。/javascript/ と同じ間違い（型・プロパティ・引数・null）が「書いた時点」で赤くなる様子を体験できます。
主な機能
- 型検査・JS 変換・実行の3段階を必ず表示（型エラーがあっても変換と実行は続行）
- /javascript/ と同じ4題材が「書いた時点で赤くなる」ことを体験
- interface・ジェネリクス・ユニオン型・enum の TS 固有4本
- 変換後の JS に残らない部分（型注釈・interface・型引数）を薄色で表示
- strict の切替チェックボックス（既定 ON）で指摘の増減を確認
- CodeMirror 6・typescript.js と QuickJS は cdn.jsdelivr.net から初回のみ・送信ゼロ
よくある質問
Q. 入力した TypeScript コードはサーバーに送られますか？
A. 送られません。型検査（typescript.js）も実行（QuickJS）もブラウザ内で完結します。外へ出る通信は処理系のダウンロード（初回のみ）だけです。
Q. 型エラーがあると実行は止まりますか？
A. 止まりません。このページでは型検査でエラーが出ても、JavaScript への変換と実行を必ず行います。TypeScript は「実行を止める仕組み」ではなく「実行前に指摘する仕組み」だからです。
Q. 変換後の JavaScript で薄く表示されている部分は何ですか？
A. 型注釈・interface・ジェネリクスの型引数など、変換で完全に消える箇所です。enum だけは例外で、変換後も実体（オブジェクト）が残ります。
Q. strict のチェックを外すと何が変わりますか？
A. noImplicitAny などの厳しい検査が外れ、同じコードでも指摘される型エラーの数が減ります。たとえば引数に型を書いていない関数の指摘（7006）が消えます。
Q. /javascript/ との違いは何ですか？
A. /javascript/ と同じ題材（型・プロパティ・引数・null）を TypeScript で書いたサンプルが含まれています。JS では実行して初めて気づく間違いが、TS では型注釈のおかげで書いた時点で指摘される様子を見比べられます。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
