TypeScriptランナーとは？

TypeScriptは型付きのJavaScriptです。インターフェースと型注釈を使ってデータの形を記述すると、TypeScriptコンパイラーが実行前にコードをプレーンなJavaScriptへ変換します。数行のコードを試すだけでも、通常はプロジェクト、コンパイラー、設定ファイルを用意する必要があります。TypeScriptランナーなら、そのすべてが不要です。コードを書いて実行し、console.log が出力した内容を確認できます。

ツールの説明

このツールはブラウザー上でTypeScriptを実行し、コードがコンソールに書き込んだ内容をすべて表示します。左側にコードを入力または貼り付けて「実行」を押すか、Ctrl+Enter（MacではCmd+Enter）を押してください。出力は右側に表示され、各 console 呼び出しにつき1行が表示されます。警告とエラーは色分けされます。実行を指示するまで何も実行されないため、自由に編集できます。

コードは公式のTypeScriptコンパイラーでコンパイルされ、ブラウザーのバックグラウンドスレッドであるWeb Workerで実行されます。そのため、終了しないスクリプトでページがフリーズすることはありません。「停止」を押せば、実行は終了します。コードがサーバーに送信されることはありません。

例

インターフェースでデータを定義して操作します。

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "本", price: 12 },
  { name: "ペン", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`合計: ${total}`);
TypeScript

出力：

合計: 13.5

enumとパラメータプロパティを持つクラスを使用します。

enum Level {
  Low = "低",
  High = "高",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title}（${this.level}）`;
  }
}

console.log(new Task("テストを書く", Level.High).describe());
TypeScript

出力：

テストを書く（高）

機能

  • 公式コンパイラーでTypeScriptを実行するため、すべてのTypeScript構文に対応
  • enum、namespace、デコレーター、ジェネリクス、パラメータプロパティに対応
  • tscと同じ形式で、構文エラーの行番号と列番号を表示
  • console.log、info、debug、warn、errorの出力を表示し、警告とエラーを色分け
  • オブジェクト、配列、マップ、セット、クラス、日付、エラーを整形し、循環参照にも対応
  • console.group、count、time、assert、dir、clearに対応
  • トップレベルのawait、タイマー、promiseを含む非同期コードを実行
  • キャッチされなかったエラーと処理されなかったpromiseの拒否を出力に表示
  • 無限ループで停止しないスクリプトでも、即座に終了できる「停止」ボタン
  • デフォルトで有効な「ログを保持」オプションにより、以前の実行結果を残して比較可能
  • 出力内の行にカーソルを合わせると、そのログが記録された日時を表示
  • 出力全体をコピー、「クリア」ボタンで消去、またはコードをファイルとしてダウンロード可能

仕組み

「実行」を押すと、TypeScriptコンパイラーがコードから型を削除し、JavaScriptに変換します。コンパイラーはページを開いたときに一度だけ読み込まれるため、接続速度が遅い場合は初回の実行に少し時間がかかることがあります。コードに構文エラーがある場合はエラーが表示され、コードは実行されません。

その後、JavaScriptが新しいWeb Workerに送られます。Worker内では console メソッドが置き換えられているため、呼び出しのたびにテキストへ変換され、ページへ送り返されます。コードは非同期関数でラップされます。これにより、トップレベルで await を使用できます。

出力の下にあるステータスバーには、コードのコンパイル中、実行中、またはコードが開始したタイマーの待機中に「実行中」と表示されます。setInterval をクリアするか「停止」を押すまで、実行は継続します。実行のたびに新しいWorkerが開始されるため、以前の実行で使用した変数が残ることはありません。

ヒント

  • 型チェックは行われません。tsxやesbuildと同様に、ツールは型を削除してコードを実行するため、const count: number = "three" もエラーなしで実行されます
  • 最後に式を書くのではなく、console.logを使用してください。最後の行の値は出力されないため、1 + 2 だけを書いても何も表示されません
  • コード内にexport文や型専用のimportを残しておくことはできます。パッケージのインポートは機能せず、「モジュールが見つかりません」というエラーになります
  • Workerにはページがないため、document、window、その他のDOMオブジェクトは利用できません。グローバルスコープには self を使用してください
  • 出力は最新の1000行を保持し、1行は10000文字を超えると切り詰められます
  • ブラウザーのコンソールで実行するときと同様に、信頼できるコードだけを実行してください