TypeScript CLI รันเนอร์ออนไลน์

รันโค้ด TypeScript แบบ CLI ออนไลน์ทันใจในเบราว์เซอร์ ไม่ต้องติดตั้ง เหมาะสำหรับการทดลอง เรียนรู้ และดีบั๊ก

เวอร์ชัน

ตัวอย่าง

🚀 การดำเนินการทั้งหมด ( ในเดือนนี้)

📚 คอร์ส Typescript ที่ดีที่สุดที่คุณไม่ควรพลาด

🌀 เกี่ยวกับตัวรัน TypeScript ออนไลน์นี้

CodeUtility TypeScript Executor ให้คุณเขียนและรันโค้ด TypeScript ได้โดยตรงบนเบราว์เซอร์ — ไม่ต้องตั้งค่า compiler ไม่ต้องติดตั้ง Node.js และไม่ต้องมีสภาพแวดล้อมในเครื่อง มันรันโค้ด TypeScript จริงที่คอมไพล์เป็น JavaScript ภายในรันไทม์ที่ปลอดภัยและแยกสภาพแวดล้อม (sandboxed)

สภาพแวดล้อมนี้รองรับ TypeScript 5.4 ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของภาษา เช่น decorators การอนุมานชนิดที่ดีขึ้น และการรองรับ ECMAScript สมัยใหม่

ไม่ว่าคุณจะกำลังเรียนรู้ TypeScript ทดสอบฟังก์ชันยูทิลิตี้ หรือทดลองกับ typing และ interfaces เครื่องมือนี้มอบวิธีการเขียน คอมไพล์ และรันโค้ดแบบรวดเร็ว โต้ตอบได้ พร้อมผลลัพธ์ทันที

เหมาะสำหรับนักพัฒนาที่อยากสำรวจระบบชนิดข้อมูลของ TypeScript หรือยืนยันว่า TypeScript คอมไพล์เป็น JavaScript อย่างไร โดยไม่ต้องสลับไปมาระหว่างตัวแก้ไขโค้ดหรือเทอร์มินัลในเครื่อง

💡 วิธีใช้เครื่องมือนี้

1. เลือกเวอร์ชัน TypeScript ที่มีให้ (5.4) จากเมนูดรอปดาวน์ด้านบนของตัวแก้ไข
2. พิมพ์หรือวางโค้ด TypeScript ของคุณในพื้นที่ตัวแก้ไข — รวมถึง types, interfaces และ generics
3. คลิก รัน เพื่อคอมไพล์และรันโค้ดของคุณ แล้วดูผลลัพธ์ในคอนโซลด้านล่าง
4. ระหว่างกำลังรันจะมีปุ่ม หยุด แสดง — คลิกเพื่อยุติกระบวนการก่อนกำหนด
5. ใช้ แก้โค้ด เพื่อแก้ปัญหาซินแท็กซ์หรือการเยื้องอัตโนมัติ
6. หลังจากแก้แล้วจะมีปุ่ม การแก้ไข ปรากฏ — คลิกเพื่อทบทวนการแก้ไขล่าสุด
7. คุณยังสามารถ อัปโหลด ไฟล์จากเครื่องเข้าสู่ตัวแก้ไข หรือ ดาวน์โหลด โค้ดปัจจุบันของคุณได้
8. การรันแต่ละครั้งใช้เวลาได้สูงสุด 20 วินาที ก่อนจะตัดเวลาทิ้ง เพื่อความเสถียรและความยุติธรรม

🧠 เคล็ดลับ: ตัวรัน TypeScript จะคอมไพล์โค้ดของคุณเป็น JavaScript ให้อัตโนมัติอยู่เบื้องหลัง — คุณจึงทดสอบพฤติกรรมการรันจริงได้ พร้อมได้ประโยชน์จาก static typing และความปลอดภัยตอนคอมไพล์

💡 คู่มือพื้นฐาน TypeScript สำหรับผู้เริ่มต้น

1. การประกาศตัวแปร

TypeScript รองรับ static typing ด้วย let, const และ type annotations

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("หนึ่ง");
    break;
  case 2:
    console.log("สอง");
    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);      // ลบสมาชิกตัวที่สอง
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

ใช้วัตถุธรรมดาหรือ 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. การอ่าน/เขียนไฟล์ (เฉพาะ Node.js)

ใช้โมดูล fs ของ Node.js เพื่ออ่านและเขียนไฟล์

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 = "Hello World";
console.log(str.length);
console.log(str + "!");
console.log(str.includes("World"));

12. คลาสและอ็อบเจ็กต์

TypeScript รองรับการเขียนโปรแกรมเชิงวัตถุ (OOP)

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    console.log(`สวัสดี ฉันชื่อ ${this.name}`);
  }
}

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