Programming

Typescript 5 New Features Guide

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

Typescript 5 New Features Guide คืออะไร / ทำไมถึงสำคัญ

น้องๆ เคยเจอปัญหาเขียน Javascript แล้ว Error ตอน Runtime มั้ย? สมัยผมทำร้านเน็ตฯ เจอบ่อยมาก เด็กมัน Copy Code จากเว็บมาแปะ แล้ว Error ทั้งร้าน! Typescript มาแก้ปัญหานี้แหละ มันช่วยดัก Error ตั้งแต่ตอนเขียน Code เลย

Typescript 5 ก็เหมือน Version ใหม่ที่เก่งขึ้นไปอีก! มันเพิ่ม Feature ใหม่ๆ ที่ทำให้ Code เรา Clean ขึ้น, อ่านง่ายขึ้น, แล้วก็ Error น้อยลงด้วย คิดง่ายๆ มันเหมือนเราอัพเกรดเครื่อง Server ในร้านเน็ตฯ ให้แรงขึ้น เร็วขึ้น เด็กๆ ก็เล่นเกมส์กันสนุกมากขึ้นไงล่ะ!

พื้นฐานที่ต้องรู้

Typescript คืออะไร?

Typescript เป็นภาษาที่ต่อยอดมาจาก Javascript แต่มันเพิ่ม Type เข้ามา ทำให้เรากำหนดชนิดของข้อมูล (เช่น ตัวเลข, ข้อความ, Boolean) ให้กับตัวแปรและ Function ได้ ตอน Compile มันจะเช็ค Type ให้เรา ถ้าเจอว่าเราใช้ผิด Type มันก็จะแจ้งเตือนเลย

คิดภาพตามนะ สมัยก่อนเรามีแต่ Javascript เหมือนมีแต่ข้าวเปล่าๆ จะกินให้อร่อยต้องปรุงเอง Typescript ก็เหมือนมีเครื่องปรุง (Type) มาให้ เราปรุงรสชาติ (กำหนด Type) ให้ข้าวเราอร่อยขึ้น (Code ดีขึ้น) แถมคนกิน (โปรแกรมเมอร์คนอื่น) ก็รู้ว่าเราใส่อะไรลงไปบ้าง (เข้าใจ Code ง่ายขึ้น)

Type Annotations

Type Annotations คือการที่เราใส่ : Type หลังชื่อตัวแปรหรือ Parameter ของ Function เพื่อบอกว่ามันเป็น Type อะไร ตัวอย่างเช่น

let age: number = 30;
let name: string = "John";

function greet(name: string): string {
  return "Hello, " + name;
}

ใน Code นี้ เราบอกว่า age เป็น number, name เป็น string และ Function greet รับ Parameter ชื่อ name ที่เป็น string และ Return ค่าเป็น string ถ้าเราพยายาม Assign ค่าผิด Type ให้กับ age หรือ name ตอน Compile Typescript จะแจ้ง Error เลย

เปรียบเทียบง่ายๆ เหมือนเราติดป้ายบอกประเภทสินค้าในร้านเน็ตฯ ว่าเครื่องนี้เล่นเกมส์อะไรได้บ้าง ถ้าเด็กมันไปนั่งผิดเครื่อง เราก็บอกได้เลยว่า "เฮ้ย! เครื่องนี้เล่นเกมส์นี้ไม่ได้นะ"

วิธีใช้งาน / เริ่มต้นยังไง

การเริ่มต้นใช้งาน Typescript ไม่ยากอย่างที่คิด สมัยผมเริ่มทำร้านเน็ตฯ ใหม่ๆ ก็งมๆ เอาเหมือนกัน แต่พอเข้าใจหลักการแล้วมันง่ายมาก

อันดับแรก เราต้องติดตั้ง Node.js และ npm ก่อน (ถ้ายังไม่มี) หลังจากนั้นก็ใช้ npm ติดตั้ง Typescript Compiler (tsc) ได้เลย

npm install -g typescript

พอติดตั้งเสร็จแล้ว เราก็สร้างไฟล์ .ts (Typescript File) แล้วเขียน Code ของเราลงไป จากนั้นก็ใช้ tsc Compile ไฟล์ .ts ให้เป็นไฟล์ .js ที่ Browser เข้าใจได้

tsc myFile.ts

ไฟล์ myFile.js ที่ได้ ก็คือ Javascript Code ที่เราเขียนไว้ใน myFile.ts นั่นเอง แต่ Typescript Compiler จะช่วย Check Type ให้เราก่อน Compile ทำให้มั่นใจได้ว่า Code เราถูกต้องในระดับหนึ่ง

ขั้นตอนปฏิบัติจริง

ตั้งค่า Typescript Project

ก่อนเริ่มเขียน Typescript จริงจัง เราควรสร้าง Project และตั้งค่า tsconfig.json ก่อน ไฟล์นี้จะบอก Typescript Compiler ว่าเราต้องการ Compile Code แบบไหน, ใช้ Version ไหน, และมี Option อะไรบ้าง

วิธีสร้าง tsconfig.json ง่ายๆ คือใช้คำสั่ง tsc --init ใน Folder Project ของเรา

tsc --init

ไฟล์ tsconfig.json ที่ได้ จะมี Option ต่างๆ มากมายให้เราปรับแต่ง เช่น target (Version Javascript ที่ต้องการ), module (รูปแบบ Module ที่ต้องการ), strict (เปิด/ปิด Strict Mode) ลองศึกษาดูนะครับ

เขียน Code Typescript

หลังจากตั้งค่า Project แล้ว เราก็เริ่มเขียน Code Typescript ได้เลย ลองสร้างไฟล์ index.ts แล้วเขียน Code ง่ายๆ เช่น

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

let result: number = add(5, 3);
console.log(result);

แล้ว Compile ด้วยคำสั่ง tsc

tsc index.ts

จะได้ไฟล์ index.js ที่มี Code Javascript ที่เทียบเท่ากัน เราสามารถ Run ไฟล์นี้ใน Browser หรือ Node.js ได้เลย

ใช้ Typescript กับ React (ตัวอย่าง)

Typescript เข้ากันได้ดีกับ Framework Javascript หลายตัว เช่น React, Angular, Vue.js ลองดูตัวอย่างการใช้ Typescript กับ React

interface Props {
  name: string;
}

function MyComponent(props: Props) {
  return <div>Hello, {props.name}</div>;
}

export default MyComponent;

ใน Code นี้ เรากำหนด Interface Props เพื่อบอกว่า Component MyComponent รับ Props ชื่อ name ที่เป็น string การทำแบบนี้จะช่วยให้เราดัก Error ได้ตั้งแต่ตอนเขียน Code ถ้าเราส่ง Props ผิด Type ให้กับ MyComponent Typescript จะแจ้งเตือนทันที

อยากรู้เรื่อง React เพิ่มเติม ลองเข้าไปดูที่ SiamCafe Blog นะ มีบทความดีๆ เยอะเลย

เปรียบเทียบกับทางเลือกอื่น

Typescript ไม่ใช่ทางเลือกเดียวในการเขียน Javascript ให้ดีขึ้น ยังมีทางเลือกอื่นๆ อีก เช่น Flow, JSDoc แต่ละทางเลือกก็มีข้อดีข้อเสียแตกต่างกันไป

Feature	Typescript	Flow	JSDoc
Type System	Static Typing	Static Typing	Dynamic Typing (with Comments)
Community Support	Large and Active	Smaller	Depends on Tooling
Integration with IDEs	Excellent	Good	Limited
Learning Curve	Moderate	Moderate	Low

Typescript มีข้อดีคือเป็น Static Typing ที่แข็งแกร่ง, มี Community Support ขนาดใหญ่, และ Integration กับ IDEs ที่ดีเยี่ยม แต่ก็มี Learning Curve ที่สูงกว่า JSDoc

Flow ก็เป็น Static Typing เหมือน Typescript แต่มี Community Support ที่เล็กกว่า

JSDoc เป็น Dynamic Typing ที่ใช้ Comment เพื่อบอก Type ของตัวแปรและ Function ใช้งานง่าย แต่ไม่แข็งแกร่งเท่า Static Typing

สุดท้ายแล้ว การเลือกใช้ Tool ตัวไหน ขึ้นอยู่กับความชอบและความเหมาะสมของแต่ละ Project สมัยผมทำร้านเน็ตฯ ก็ต้องเลือก Hardware ให้เหมาะกับเกมส์ที่เด็กๆ เล่นเหมือนกัน

ถ้าอยากอ่านเรื่อง Programming อื่นๆ อีก ลองแวะไปที่ SiamCafe Blog ได้เลยนะ

🎬 วิดีโอแนะนำ

ดูวิดีโอเพิ่มเติมเกี่ยวกับTypescript 5 New Features Guid:

Best Practices / เคล็ดลับจากประสบการณ์

เอาล่ะน้องๆ มาถึงตรงนี้แล้ว แสดงว่าสนใจ TypeScript 5 จริงจังนะ สมัยผมทำร้านเน็ต SiamCafe (ตั้งแต่ปี 2540 กว่าๆ โน่น) สมัยนั้นยังไม่มี TypeScript หรอก มีแต่ JavaScript เพียวๆ เขียนไปแก้ไป ปวดหัวสุดๆ พอมี TypeScript นี่ชีวิตดีขึ้นเยอะเลย

ประสบการณ์สอนผมว่า TypeScript ไม่ใช่แค่ "JavaScript ที่มี Type" แต่มันคือเครื่องมือที่ช่วยให้เราออกแบบ Application ได้ดีขึ้นเยอะมากๆ ถ้าเราใช้มันให้เป็นนะ

จำไว้ว่า Typescript ช่วย "ป้องกัน" ปัญหา มากกว่า "แก้" ปัญหา เพราะฉะนั้นเราต้องใช้มันตั้งแต่เริ่ม project เลย

3-4 เทคนิคที่ใช้ได้จริง

1. Embrace Type Inference: TypeScript มันฉลาดนะน้อง! หลายครั้งมันสามารถเดา Type ของตัวแปรได้เอง ไม่ต้องไปประกาศให้เมื่อยมือ ตัวอย่าง:

const message = "Hello, world!"; // TypeScript รู้เองว่า message เป็น string
let counter = 0; // TypeScript รู้เองว่า counter เป็น number

แต่ถ้าเราอยากจะกำหนด Type เอง ก็ทำได้นะ:

const message: string = "Hello, world!";
let counter: number = 0;

2. Use Union Types: บางทีตัวแปรเรามันอาจจะเป็นได้หลาย Type เช่น อาจจะเป็น `string` หรือ `number` ก็ได้ เราใช้ Union Types ช่วยได้:

function printId(id: string | number) {
  console.log("ID:", id);
}

printId(123); // OK
printId("456"); // OK
// printId({ value: 789 }); // Error! Argument of type '{ value: number; }' is not assignable to parameter of type 'string | number'.

3. Leverage Generics: Generics ช่วยให้เราเขียน Function หรือ Class ที่ทำงานกับ Type ที่หลากหลายได้ โดยที่เราไม่ต้องเขียน Function หรือ Class นั้นใหม่ทุกครั้ง ตัวอย่าง:

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");  // type of output will be string
let myNumber: number = identity<number>(123);   // type of output will be number
let myBoolean: boolean = identity<boolean>(true); // type of output will be boolean

4. Strict Mode is Your Friend: เปิด `strict` mode ใน `tsconfig.json` เถอะน้อง! มันจะช่วยจับ Error ที่เราอาจจะมองข้ามไปได้เยอะมาก สมัยผมทำ SiamCafe ถ้ามี TypeScript ตั้งแต่แรก คงไม่ต้องแก้ Bug กันหัวแตกขนาดนั้น

FAQ คำถามที่พบบ่อย

TypeScript vs JavaScript อันไหนดีกว่ากัน?

เหมือนถามว่า "รถยนต์ vs มอเตอร์ไซค์ อันไหนดีกว่ากัน?" มันขึ้นอยู่กับว่าเราจะเอาไปทำอะไร ถ้าโปรเจคเล็กๆ JavaScript ก็พอ แต่ถ้าโปรเจคใหญ่ๆ ซับซ้อน TypeScript จะช่วยให้ชีวิตง่ายขึ้นเยอะ

TypeScript ยากไหม?

ช่วงแรกๆ อาจจะงงๆ หน่อย แต่พอเข้าใจ Concept แล้ว จะรู้สึกว่ามันไม่ได้ยากอย่างที่คิด แถมยังสนุกอีกด้วย! เหมือนตอนหัดเล่นเกมใหม่ๆ นั่นแหละ

TypeScript ต้องใช้ Framework อะไรบ้าง?

TypeScript ใช้ได้กับ Framework เยอะแยะเลย React, Angular, Vue.js เลือกตามที่ชอบได้เลย เหมือนเลือกรสไอติมนั่นแหละ

ผมควรเริ่มเรียน TypeScript จากตรงไหน?

เริ่มจาก Document ของ TypeScript เองเลยครับ แล้วก็ลองทำ Project เล็กๆ ดู หา Tutorial ใน SiamCafe Blog อ่านไปด้วย SiamCafe Blog ค่อยๆ เรียนรู้ไปทีละ Step อย่าใจร้อน

สรุป

TypeScript 5 มี Feature ใหม่ๆ ที่น่าสนใจเยอะแยะเลย ลองเอาไปใช้กันดูนะครับ แล้วจะรู้ว่ามันช่วยให้ชีวิตการเขียนโปรแกรมง่ายขึ้นเยอะจริงๆ อย่าลืมว่า iCafeForex ก็ใช้ TypeScript นะครับ (อันนี้แอบโปรโมทนิดนึง ฮ่าๆ)

จำไว้ว่า Programming ก็เหมือนการสร้างบ้าน ต้องมี Foundation ที่แข็งแรง TypeScript นี่แหละ คือ Foundation ที่ดี