オンライン TypeScript コンパイラ – ブラウザで TypeScript を実行

オンライン TypeScript コンパイラを使って、TypeScript コードをブラウザで即座に書いて、コンパイルして、実行できます。TypeScript を学んでいる開発者や、すぐにコードをテストしたいときに最適です。

バージョン

サンプル

🚀 合計実行 ( 今月)

📚 今すぐ始めたい人気のTypescriptコース

💡 初心者のための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("Positive");
} else if (x < 0) {
  console.log("Negative");
} else {
  console.log("Zero");
}

switch (x) {
  case 1:
    console.log("One");
    break;
  case 2:
    console.log("Two");
    break;
  default:
    console.log("Other");
}

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("Hello, " + 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("Something went wrong");
} catch (e) {
  console.error(e.message);
}

10. ファイル入出力 (Node.jsのみ)

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

import * as fs from "fs";

fs.writeFileSync("file.txt", "Hello File");
const content = fs.readFileSync("file.txt", "utf-8");
console.log(content);

11. 文字列操作

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

let str = "Hello World";
console.log(str.length);
console.log(str + "!");
console.log(str.includes("World"));

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

TypeScriptはオブジェクト指向プログラミングをサポートしています。

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    console.log(\`Hi, I'm \${this.name}\`);
  }
}

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