Type Checking ในภาษา TypeScript

การตรวจสอบประเภทข้อมูล (Type Checking)

TypeScript ใช้ระบบตรวจสอบประเภทข้อมูลแบบสถิต (Static Type Checking) เพื่อตรวจจับข้อผิดพลาดก่อนที่โค้ดจะถูกรัน ช่วยให้พัฒนาโปรแกรมได้อย่างมีประสิทธิภาพและลดข้อผิดพลาดในระหว่างการรันโปรแกรม

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

ตัวอย่าง:

// การตรวจสอบประเภทข้อมูลพื้นฐาน
let name: string = "Wrikka";
// name = 123;  // ผิด! ไม่สามารถกำหนดค่า number ให้กับตัวแปรประเภท string ได้

// การตรวจสอบประเภทข้อมูลในฟังก์ชัน
function greet(person: string): string {
  return `Hello, ${person}!`;
}

greet("Wrikka");  // ถูกต้อง
// greet(123);    // ผิด! ต้องส่งค่า string

การตรวจสอบประเภทข้อมูลใน Object

คำอธิบาย: TypeScript จะตรวจสอบว่า object มี property และประเภทข้อมูลที่ถูกต้องตามที่ประกาศไว้หรือไม่

ตัวอย่าง:

// กำหนดโครงสร้าง object ด้วย interface
interface User {
  name: string;
  age: number;
  isActive: boolean;
}

// สร้าง object ตาม interface
let user: User = {
  name: "Wrikka",
  age: 25,
  isActive: true
};

// การตรวจสอบประเภทข้อมูลใน object
user.name = "TypeScript";  // ถูกต้อง
// user.age = "25";        // ผิด! ต้องเป็น number
// user.role = "admin";    // ผิด! ไม่มี property role ใน interface User

// object ที่มี property ไม่ครบตาม interface
// let incomplete: User = {
//   name: "Wrikka",
//   age: 25
//   // ขาด isActive
// };  // ผิด! ขาด property isActive

การตรวจสอบประเภทข้อมูลใน Function

คำอธิบาย: TypeScript จะตรวจสอบประเภทข้อมูลของพารามิเตอร์และค่าที่ส่งคืนจากฟังก์ชัน

ตัวอย่าง:

// กำหนด interface User ก่อนใช้งาน
interface User {
  name: string;
  age: number;
  isActive: boolean;
}

// ฟังก์ชันที่รับและส่งคืนค่าที่มีประเภทข้อมูลเฉพาะ
function calculateArea(width: number, height: number): number {
  return width * height;
}

let area = calculateArea(5, 10);  // ถูกต้อง
// let wrongArea = calculateArea("5", 10);  // ผิด! ต้องส่งค่า number

// ฟังก์ชันที่รับ optional parameter
function createUser(name: string, age?: number): User {
  return {
    name,
    age: age || 0,
    isActive: true
  };
}

let user1 = createUser("Wrikka");  // ถูกต้อง
let user2 = createUser("Wrikka", 25);  // ถูกต้อง

การตรวจสอบประเภทข้อมูลใน Union Types

คำอธิบาย: Union Types ช่วยให้ตัวแปรสามารถมีได้หลายประเภทข้อมูล TypeScript จะตรวจสอบว่าค่าที่กำหนดเป็นหนึ่งในประเภทข้อมูลที่อนุญาตหรือไม่

ตัวอย่าง:

// Union Types
let id: string | number;
id = "abc123";  // ถูกต้อง
id = 123;       // ถูกต้อง
// id = true;   // ผิด! ต้องเป็น string หรือ number เท่านั้น

// การใช้ Union Types ในฟังก์ชัน
function printId(id: string | number) {
  console.log(`ID: ${id}`);
  
  // การเข้าถึง methods ต้องตรวจสอบประเภทข้อมูลก่อน
  if (typeof id === "string") {
    console.log(id.toUpperCase());  // ถูกต้อง เพราะตรวจสอบแล้วว่าเป็น string
  } else {
    console.log(id.toFixed(0));     // ถูกต้อง เพราะตรวจสอบแล้วว่าเป็น number
  }
  
  // console.log(id.toUpperCase());  // ผิด! id อาจเป็น number
}

การตรวจสอบประเภทข้อมูลใน Array และ Tuple

คำอธิบาย: TypeScript จะตรวจสอบประเภทข้อมูลของสมาชิกใน Array และ Tuple

ตัวอย่าง:

// Array
let numbers: number[] = [1, 2, 3];
numbers.push(4);  // ถูกต้อง
// numbers.push("5");  // ผิด! ต้องเป็น number

// Tuple
let person: [string, number] = ["Wrikka", 25];
// person = [25, "Wrikka"];  // ผิด! ลำดับประเภทข้อมูลไม่ถูกต้อง
// person = ["Wrikka", 25, true];  // ผิด! มีจำนวนสมาชิกเกิน

การตรวจสอบประเภทข้อมูลใน Generic Types

คำอธิบาย: Generic Types ช่วยให้สามารถสร้างโค้ดที่ทำงานกับหลายประเภทข้อมูลได้ โดย TypeScript จะตรวจสอบความสอดคล้องของประเภทข้อมูล

ตัวอย่าง:

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

let output1 = identity<string>("Wrikka");  // ถูกต้อง output1 เป็น string
let output2 = identity<number>(123);       // ถูกต้อง output2 เป็น number

// Generic Class
class Box<T> {
  private value: T;
  
  constructor(value: T) {
    this.value = value;
  }
  
  getValue(): T {
    return this.value;
  }
}

let stringBox = new Box<string>("Wrikka");
let value = stringBox.getValue();  // value เป็น string

การตรวจสอบประเภทข้อมูลใน Intersection Types

คำอธิบาย: Intersection Types ช่วยให้สามารถรวมหลายประเภทข้อมูลเข้าด้วยกัน TypeScript จะตรวจสอบว่า object มี property ครบตามทุกประเภทข้อมูลที่รวมกันหรือไม่

ตัวอย่าง:

// Intersection Types
interface Named {
  name: string;
}

interface Aged {
  age: number;
}

type Person = Named & Aged;  // ต้องมีทั้ง name และ age

let person: Person = {
  name: "Wrikka",
  age: 25
};  // ถูกต้อง

// let incomplete: Person = {
//   name: "Wrikka"
//   // ขาด age
// };  // ผิด! ขาด property age