IDE Typescript น้ำหนักเบา - รันโค้ด Typescript ออนไลน์

เขียน รัน และดีบัก Typescript ใน IDE ออนไลน์น้ำหนักเบาที่รองรับหลายไฟล์ พื้นที่ทำงานถาวร ไลบรารีตามรันไทม์ การแชร์ และการทำงานร่วมกันแบบเรียลไทม์

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

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

กำลังโหลด...

💡 กำลังมองหาการพัฒนาทักษะของคุณหรือไม่? หลักสูตรเหล่านี้อาจช่วยได้ ลองดูในขณะที่โมเดล AI ของเราประมวลผลคำขอของคุณ

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

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

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

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

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

มากกว่าเครื่องมือรันโค้ด

ใช้ตัวแก้ไขหลายไฟล์ เทอร์มินัลประมวลผลแบบแยกส่วน ไลบรารีเฉพาะรันไทม์ พื้นที่ทำงานถาวร การแชร์ และการทำงานร่วมกันแบบเรียลไทม์ได้จากตัวประมวลผลเดียวกัน

วิธีใช้ตัวประมวลผลนี้

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

  1. เลือกเวอร์ชันแล้วแก้ไขไฟล์ปัจจุบัน หรือเปิดไฟล์อื่นในพื้นที่ทำงาน
  2. เรียกใช้โค้ด ป้อนข้อมูลในเทอร์มินัลเมื่อระบบร้องขอ และตรวจสอบประวัติการเรียกใช้ที่บันทึกไว้
  3. ใช้ไลบรารี เครื่องมือพื้นที่ทำงาน การแชร์ และแชท เมื่องานของคุณต้องใช้โค้ดมากกว่าหนึ่งส่วน

💡 คู่มือพื้นฐาน 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();