TypeScript

TypeScript เป็นภาษาที่มีความยืดหยุ่นและสามารถใช้ได้กับโครงการขนาดใหญ่หรือเล็ก โดยมีเครื่องมือและไลบรารีต่างๆ ที่รองรับการพัฒนา

ประโยชน์ของ TypeScript

คุณสมบัติหลัก	รายละเอียด
การตรวจสอบชนิดข้อมูล	ตรวจสอบชนิดข้อมูลขณะคอมไพล์ ช่วยลดข้อผิดพลาดขณะรันโปรแกรม
การเขียนโปรแกรมเชิงวัตถุ	รองรับ class, interface, inheritance สำหรับการออกแบบระบบ
เครื่องมือพัฒนาขั้นสูง	มี autocomplete, refactoring และ IntelliSense ที่แม่นยำ
ทำงานร่วมกับ JavaScript	สามารถใช้โค้ด JavaScript ที่มีอยู่ได้ทันที
จัดการโครงการขนาดใหญ่	โครงสร้างโค้ดที่ชัดเจน ช่วยให้ทีมทำงานร่วมกันได้ดี
ระบบนิเวศที่แข็งแกร่ง	มีไลบรารีและเฟรมเวิร์กมากมายที่รองรับ TypeScript
ฟีเจอร์ ECMAScript ล่าสุด	สามารถใช้ฟีเจอร์ใหม่ๆ ของ JavaScript ก่อนที่เบราว์เซอร์จะรองรับ
เอกสารอัตโนมัติ	ระบบ Type ช่วยสร้างและดูแลเอกสารอัตโนมัติ

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

Installation

Install TypeScript using your preferred package manager:

npm

npm install -D typescript

pnpm

pnpm add -D typescript

yarn

yarn add -D typescript

bun

bun add -D typescript

Installation is the first step to start using TypeScript.

How TypeScript Works

กระบวนการทำงานของ TypeScript:

1. เขียนโค้ด TypeScript (.ts)
2. Type Checker ตรวจสอบชนิดข้อมูล
3. หากถูกต้อง จะคอมไพล์เป็น JavaScript (.js)
4. หากมีข้อผิดพลาด จะแสดง Error Messages
5. โค้ด JavaScript ที่ได้ทำงานใน Runtime

Configuration

การสร้างไฟล์ tsconfig.json เป็นขั้นตอนสำคัญในการตั้งค่า TypeScript

tsc --init

หรือสร้างไฟล์ด้วยคอนฟิกพื้นฐาน:

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

การกำหนดค่า compilerOptions เป็นหัวใจสำคัญในการตั้งค่า TypeScript

compilerOptions

ตัวเลือก	คำอธิบาย	ประโยชน์
target	เวอร์ชัน JavaScript ที่คอมไพล์ออกมา	เข้ากันได้กับรุ่นเบราว์เซอร์หรือ Node.js ที่ต้องการ
module	ระบบโมดูลที่ใช้	กำหนดรูปแบบการนำเข้า/ส่งออกโมดูล
strict	เปิดโหมดตรวจสอบชนิดแบบเข้มงวดทั้งหมด	ลดข้อผิดพลาดและเพิ่มความปลอดภัยของชนิดข้อมูล
esModuleInterop	ทำให้การทำงานกับโมดูล ES6 และ CommonJS ง่ายขึ้น	เข้ากันได้ดีกับไลบรารีต่างๆ
skipLibCheck	ข้ามการตรวจสอบไฟล์ declaration	เพิ่มความเร็วในการคอมไพล์
forceConsistentCasingInFileNames	บังคับใช้การตั้งชื่อไฟล์ให้สอดคล้องกัน	ป้องกันปัญหาเรื่อง case sensitivity
outDir	โฟลเดอร์ที่เก็บไฟล์ที่คอมไพล์แล้ว	จัดการไฟล์ที่คอมไพล์แล้วอย่างเป็นระเบียบ
rootDir	โฟลเดอร์หลักของโปรเจค	กำหนดโครงสร้างโปรเจคให้ชัดเจน
baseUrl	ใช้สำหรับกำหนด path mapping	ทำให้การ import สะดวกขึ้น
paths	กำหนด alias สำหรับ imports	ลดความซับซ้อนของ path ในการ import
jsx	วิธีการจัดการ JSX	สนับสนุนการพัฒนา React/JSX
declaration	สร้างไฟล์ .d.ts	ช่วยในการใช้งานไลบรารีกับ TypeScript
sourceMap	สร้าง source map สำหรับ debugging	เดบักโค้ดต้นฉบับได้แม้ทำงานกับไฟล์ที่คอมไพล์แล้ว
noImplicitAny	แจ้งเตือนเมื่อมี implicit any	บังคับใช้การระบุชนิดข้อมูลอย่างชัดเจน
strictNullChecks	ตรวจสอบ null/undefined อย่างเข้มงวด	ลดข้อผิดพลาดจากค่า null/undefined
allowJs	อนุญาตให้คอมไพล์ไฟล์ JavaScript	ทำให้สามารถใช้งานไฟล์ JavaScript เดิมได้
checkJs	ตรวจสอบชนิดในไฟล์ JavaScript	ได้รับประโยชน์จาก TypeScript ในไฟล์ .js

ดูตัวเลือกทั้งหมดได้ที่ เอกสารทางการ TypeScript

Type System

ระบบชนิดข้อมูล (Type System) เป็นหัวใจสำคัญของ TypeScript ที่ช่วยเพิ่มความปลอดภัยและความชัดเจนให้กับโค้ด โดยระบบชนิดข้อมูลจะทำหน้าที่:

• ตรวจสอบความถูกต้องของชนิดข้อมูลขณะคอมไพล์
• ป้องกันข้อผิดพลาดที่เกิดขึ้นจากการใช้ชนิดข้อมูลผิดประเภท
• ช่วยในการทำเอกสารโค้ดอัตโนมัติ
• เพิ่มประสิทธิภาพเครื่องมือพัฒนาเช่น IntelliSense

Basic Types

ชนิดข้อมูลพื้นฐานที่สำคัญใน TypeScript:

ชนิดข้อมูล	ตัวอย่าง	คำอธิบาย
string	let name: string = 'John'	ใช้เก็บข้อความ Unicode สามารถใช้ template strings ด้วย `${var}`
number	let age: number = 30	เก็บได้ทั้งจำนวนเต็มและทศนิยม รวมถึง Infinity, NaN
boolean	let isActive: boolean = true	ค่าทางตรรกะ true/false เท่านั้น ไม่เหมือน JavaScript ที่รับค่า truthy/falsy
array	let nums: number[] = [1, 2, 3]	อาร์เรย์ของชนิดเดียวกัน ใช้ generic syntax Array<number> ก็ได้
tuple	let user: [string, number]	คู่ลำดับที่รู้จักชนิดและจำนวนสมาชิก ใช้กับข้อมูลที่มีโครงสร้างชัดเจน

Special Types

ชนิดข้อมูลพิเศษสำหรับกรณีใช้งานเฉพาะ:

ชนิดข้อมูล	ตัวอย่าง	คำอธิบาย
any	let value: any = 'text'	ปิดการตรวจสอบชนิด ควรใช้เฉพาะเมื่อจำเป็นจริงๆ เท่านั้น
unknown	let value: unknown	ปลอดภัยกว่า any ต้องตรวจสอบชนิดก่อนใช้งาน (type guard)
void	function log(): void	ใช้เมื่อฟังก์ชันไม่คืนค่า ไม่เหมือน undefined ที่อาจคืนค่าได้
never	function error(): never	ใช้กับฟังก์ชันที่ throw error หรือลูปที่ไม่สิ้นสุด
enum	enum Color { Red, Green }	กลุ่มค่าคงที่ สามารถเป็น numeric หรือ string ก็ได้

Type Composition

เทคนิคการรวมและจัดการชนิดข้อมูล:

ชนิดข้อมูล	ตัวอย่าง	คำอธิบาย
Union	`string	number`
Intersection	User & Admin	รวม properties จากหลาย type/interface เข้าด้วยกัน

แต่ละชนิดข้อมูลมีบทบาทสำคัญในการสร้างระบบชนิดข้อมูลที่แข็งแกร่งใน TypeScript

Type Creation

การสร้างชนิดข้อมูลใหม่:

ชนิดข้อมูล	ตัวอย่าง	คำอธิบาย
interface	interface User { name: string }	กำหนดโครงสร้างอ็อบเจ็กต์
type alias	type Point = { x: number, y: number }	กำหนดชื่อให้ชนิดข้อมูล

Utility Types

ชนิดข้อมูลที่ช่วยให้สามารถจัดการและแปลงชนิดข้อมูลได้อย่างยืดหยุ่น:

ชนิดข้อมูล	ตัวอย่าง	คำอธิบาย
Partial<T>	Partial<User>	ทำให้ทุก property เป็น optional
Readonly<T>	Readonly<User>	ทำให้ทุก property เป็น readonly
Pick<T,K>	Pick<User, 'name'>	เลือกบาง properties
Omit<T,K>	Omit<User, 'id'>	ละเว้นบาง properties

Practical Examples

ฟีเจอร์	คำอธิบาย	ตัวอย่างการใช้งาน
Union Types	TypeA | TypeB - รับค่าหลายชนิด	ใช้งานเมื่อต้องการรับค่าที่เป็นได้หลายประเภท เช่น ID ที่อาจเป็น string หรือ number
Intersection Types	TypeA & TypeB - รวม properties จากหลาย type	สร้าง type ใหม่จาก interface ที่มีอยู่
Type Guards	ตรวจสอบชนิดข้อมูลขณะรัน	ใช้งานกับ union types อย่างปลอดภัย
Utility Types	Type ที่มีอยู่แล้วสำหรับแปลง type อื่น	สร้าง type ที่ดัดแปลงมาจาก type อื่นอย่างรวดเร็ว
Generics	พารามิเตอร์ type ที่นำกลับมาใช้ได้	สร้าง component ที่ยืดหยุ่นและปลอดภัยทางชนิดข้อมูล
Decorators	เพิ่มเติมพฤติกรรมให้ class/method	Logging, Validation, Dependency Injection
Mapped Types	สร้าง type โดยการ map properties	สร้าง type ใหม่จาก existing type
Conditional Types	type ที่ขึ้นอยู่กับเงื่อนไข	กรอง type ตามเงื่อนไขที่กำหนด

ส่วนนี้แสดงตัวอย่างการใช้งาน TypeScript ในสถานการณ์จริง พร้อมคำอธิบายใน comment เพื่อความเข้าใจที่ชัดเจน

Type Manipulation

การจัดการชนิดข้อมูลด้วย Union และ Intersection Types Union Types ใช้เมื่อค่าอาจเป็นได้หลายชนิด Intersection Types ใช้เมื่อต้องการรวม properties จากหลาย interface เข้าด้วยกัน

// Union Type: Accepts either string or number
let userId: string | number;
userId = 'USER123';  // Valid
userId = 1001;       // Valid

// Intersection Type: Combines properties from multiple interfaces
interface User { name: string; }
interface Admin { roles: string[]; }
type AdminUser = User & Admin;

// ตัวอย่างการใช้งาน AdminUser
let adminUser: AdminUser = {
  name: 'John Doe',
  roles: ['admin', 'moderator']
};

Type Guards

เทคนิคการตรวจสอบชนิดข้อมูลก่อนใช้งาน ช่วยให้ TypeScript สามารถ推断ชนิดข้อมูลได้อย่างถูกต้อง สามารถใช้ typeof, instanceof หรือ user-defined type guards

// ตรวจสอบชนิดข้อมูลก่อนใช้งาน
function processValue(val: string | number) {
  if (typeof val === 'string') {
    // TypeScript รู้ว่า val เป็น string ในบล็อกนี้
    return val.toUpperCase();
  }
  // TypeScript รู้ว่า val เป็น number ในบล็อกนี้
  return val.toFixed(2);
}

Utility Types

Built-in types ที่ช่วยจัดการและแปลงชนิดข้อมูล ช่วยลดการเขียนโค้ดซ้ำซ้อน มีประโยชน์ในการสร้าง type ที่มีโครงสร้างเฉพาะ

// ตัวอย่างการใช้ Utility Types
interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

// สร้าง type ที่มีบาง properties เท่านั้น
type ProductPreview = Pick<Product, 'id' | 'name'>;

// สร้าง type ที่ไม่มีบาง properties
type ProductWithoutPrice = Omit<Product, 'price'>;

Generics

การสร้าง component ที่ทำงานกับหลายชนิดข้อมูล เพิ่มความยืดหยุ่นในการใช้งาน ยังคงความปลอดภัยของชนิดข้อมูล

// ฟังก์ชัน generics ที่ทำงานกับหลายชนิดข้อมูล
function identity<T>(arg: T): T {
  return arg;
}

// เรียกใช้งาน
const output1 = identity<string>('hello');
const output2 = identity<number>(42);

Decorators

function log(target: any, key: string) {
  console.log(`Method ${key} called`);
}

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

Mapped Types

type Optional<T> = {
  [P in keyof T]?: T[P];
};

interface User {
  name: string;
  age: number;
}

type OptionalUser = Optional<User>;

Conditional Types

type NonNullable<T> = T extends null | undefined ? never : T;

type ValidString = NonNullable<string | null>;  // ผลลัพธ์คือ string