TypeScript CLI ランナーオンライン

TypeScriptコードをブラウザでCLI風に手軽にテスト！移動中でも設定不要で学習やデバッグに最適。

バージョン

サンプル

🚀 合計実行 ( 今月)

📈 話題のTypescriptを今すぐ学ぼう

🌀 この TypeScript オンライン実行ツールについて

CodeUtility TypeScript Executor は、ブラウザ上で直接 TypeScript のコードを書いて実行できます — コンパイラのセットアップ、Node.js のインストール、ローカル環境は不要です。安全なサンドボックス実行環境の中で、 TypeScript を JavaScript にコンパイルして実際に実行します。

この環境は現在 TypeScript 5.4 をサポートしており、デコレーター、型推論の改善、最新の ECMAScript への対応など最新の言語機能が使えます。

TypeScript を学習中でも、ユーティリティ関数のテストでも、型やインターフェースの実験でも、このツールならコードを素早くインタラクティブに記述・コンパイル・実行し、その場で結果を確認できます。

エディタやローカルのターミナルを行き来することなく、TypeScript の型システムを試したり、 TypeScript がどのように JavaScript にコンパイルされるかを検証したい開発者に最適です。

💡 このツールの使い方

1. エディタ上部のドロップダウンから利用可能な TypeScript バージョン（5.4）を選びます。
2. 型、インターフェース、ジェネリクスを含む TypeScript コードをエディタに入力または貼り付けます。
3. 実行をクリックしてコードをコンパイル・実行し、下のコンソールで出力を確認します。
4. 実行中は停止ボタンが表示されます。クリックすると処理を中断できます。
5. コードを修正 を使うと、構文やインデントの問題を自動で修正します。
6. 修正後は 修正履歴 ボタンが表示され、直近の修正内容を確認できます。
7. ローカルファイルをエディタに アップロード したり、現在のコードを ダウンロード できます。
8. 安定性と公平性のため、各実行は最大 20秒 でタイムアウトします。

🧠 ヒント: TypeScript Executor は裏側で自動的に JavaScript にコンパイルします。静的型付けとコンパイル時の安全性の恩恵を受けつつ、実行時の挙動をそのまま試せます。

💡 初心者向け TypeScript 基本ガイド

1. 変数の宣言

TypeScript では let、const、および型注釈で静的型付けができます。

let x: number = 10;
const pi: number = 3.14;
let name: string = "Alice";
let isActive: boolean = true;

2. 条件分岐（if / switch）

if、else if、else で分岐します。switch は複数の値を扱う分岐に便利です。

let x = 5;
if (x > 0) {
  console.log("正の数");
} else if (x < 0) {
  console.log("負の数");
} else {
  console.log("ゼロ");
}

switch (x) {
  case 1:
    console.log("1");
    break;
  case 2:
    console.log("2");
    break;
  default:
    console.log("その他");
}

3. ループ

for、while、for...of を使って反復処理を行います。

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

let i = 5;
while (i > 0) {
  console.log(i);
  i--;
}

4. 配列

配列は角括弧 [] で定義します。

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob"];
console.log(numbers[1]);

5. 配列の操作

push、splice、filter などの組み込みメソッドを使います。

let arr = [10, 20, 30];
arr.push(40);          // 末尾に追加
arr.splice(1, 1);      // 2番目の要素を削除
console.log(arr);

6. コンソール入出力

コンソールへの出力には console.log を使います。

const name: string = "Alice";
console.log("こんにちは、" + name);

7. 関数

引数や戻り値に型を付けて関数を定義します。

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(3, 5));

8. マップ

キーと値の構造にはプレーンなオブジェクトや Map を使えます。

const m = new Map<string, number>();
m.set("Alice", 25);
console.log(m.get("Alice"));

9. 例外処理

try と catch でエラーを扱います。

try {
  throw new Error("問題が発生しました");
} catch (e) {
  console.error(e.message);
}

10. ファイル I/O（Node.js のみ）

ファイルの読み書きには Node.js の fs モジュールを使います。

import * as fs from "fs";

fs.writeFileSync("file.txt", "こんにちは、ファイル");
const content = fs.readFileSync("file.txt", "utf-8");
console.log(content);

11. 文字列操作

length、concat、includes などの文字列メソッドを使います。

let str = "こんにちは 世界";
console.log(str.length);
console.log(str + "!");
console.log(str.includes("世界"));

12. クラスとオブジェクト

TypeScript はオブジェクト指向をサポートしています。

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    console.log(\`こんにちは、私は\${this.name}です\`);
  }
}

const p = new Person("Alice");
p.greet();