ประเภทข้อมูลและการใช้งานตัวแปร (Variable) ในภาษา TypeScript เบื้องต้น

ใน TypeScript (TS) ตัวแปรเป็นเครื่องมือสำคัญในการจัดเก็บข้อมูล โดย TS เพิ่มความสามารถในการระบุ ชนิดข้อมูล (Type Annotation) ให้กับตัวแปร เพื่อให้โค้ดมีความปลอดภัยและสามารถตรวจจับข้อผิดพลาดได้ตั้งแต่ขั้นตอนการเขียน

1. การประกาศตัวแปร (Variable Declaration)

TypeScript ใช้รูปแบบการประกาศตัวแปรเดียวกับ JavaScript โดยมี 3 คีย์เวิร์ดหลัก คือ var, let, และ const

ตัวอย่าง:

let name1: string; // การประกาศแบบไม่กำหนดค่าเริ่มต้น
let name2: string = 'Ebiwayo'; // ประกาศพร้อมกำหนดค่า (Type Annotation)

// ตัวแปรที่ประกาศโดยไม่กำหนดค่าเริ่มต้นจะมีค่าเป็น undefined
let price; // TypeScript จะอนุมาน (Inference) ว่าเป็นชนิด any

if (true) {
    let message = 'Hello'; // ถูกจำกัดขอบเขตในบล็อก if นี้เท่านั้น
}
// console.log(message); // จะเกิด Error: Cannot find name 'message'

ข้อควรจำใน TypeScript:

• ตัวแปรที่ไม่ได้กำหนดค่าจะมีค่าเริ่มต้นเป็น undefined (ไม่ใช่ null เหมือน Dart เว้นแต่เราจะกำหนดเอง)

• หากเราประกาศตัวแปรและกำหนดค่าเริ่มต้น TS จะใช้ Type Inference ในการอนุมานชนิดข้อมูลโดยอัตโนมัติ (เช่น let age = 25; จะถูกอนุมานเป็น number)

2. การกำหนดชนิดข้อมูลแบบชัดเจน (Type Annotations)

หัวใจของ TypeScript คือการใช้ : ตามหลังชื่อตัวแปรเพื่อระบุชนิดข้อมูลอย่างชัดเจน (Type Annotation)

ตัวอย่างการระบุชนิดข้อมูล:

let name: string = 'Ebiwayo';
let age: number = 25;
let weight: number = 48.5; // ทั้งจำนวนเต็มและทศนิยมใช้ number

// ถ้าค่าที่กำหนดไม่ตรงตามชนิดที่ประกาศ จะเกิด Error ตั้งแต่ตอน Compile
// name = 123; // Error: Type 'number' is not assignable to type 'string'.

3. ชนิดข้อมูลเพิ่มเติมที่สำคัญ (Key TypeScript Types)

4. ตัวแปรคงที่ (Immutable Variables)

ในการกำหนดตัวแปรที่เราไม่ต้องการเปลี่ยนแปลงค่า เราใช้ const สำหรับตัวแปร และ readonly สำหรับคุณสมบัติ (Property) ภายใน class หรือ interface

การใช้งาน const

const ถูกใช้เพื่อป้องกันการ Reassign (กำหนดค่าใหม่) ให้กับตัวแปรหลักหลังจากการประกาศครั้งแรก

const PI: number = 3.14159;
// PI = 3.14; // Error: Cannot assign to 'PI' because it is a constant.

const list = [1, 2, 3];
// list = [4, 5, 6]; // Error: เปลี่ยนค่าตัวแปรหลักไม่ได้
list.push(4); // แต่ยังสามารถเปลี่ยนแปลงข้อมูลภายใน Array ได้ (Mutability)

การใช้งาน readonly ในคลาส

ใน TypeScript จะใช้คีย์เวิร์ด readonly ภายในคลาส เพื่อป้องกันการแก้ไขค่าของ Property หลังจากที่ Object ถูกสร้างขึ้น

class Shape {
    readonly name: string;
    static readonly PI: number = 3.14; // static readonly สำหรับค่าคงที่ใน Class

    constructor(name: string) {
        this.name = name;
    }
}

let circle = new Shape('Circle');
// circle.name = 'Square'; // Error: 'name' is readonly.

ข้อสังเกต: ใน TypeScript ไม่มีการจำแนกหน่วยความจำที่ซับซ้อนระหว่าง final และ const เหมือน Dart แนวคิดหลักคือการใช้ const สำหรับความไม่เปลี่ยนแปลงของตัวแปรในระดับ Block Scope

5. ข้อมูลประเภทคอลเลกชัน (Collections: Array, Set, Map)

TypeScript ใช้ Generics ในการกำหนดชนิดข้อมูลของสมาชิกในคอลเลกชัน ซึ่งช่วยเสริมความปลอดภัยของชนิดข้อมูล

Arrays (Lists)

TypeScript ใช้ Array (วงเล็บเหลี่ยม []) ในการจัดกลุ่มข้อมูล โดยมีการระบุชนิดข้อมูลของสมาชิกอย่างชัดเจน

// รูปแบบที่แนะนำ: ชนิดข้อมูล[]
let hobby: string[] = ['Reading', 'Jogging', 'Shopping'];

// รูปแบบ Generics (คล้าย Dart): Array<T>
let numbers: Array<number> = [1, 2, 3];

// hobby.push(10); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Maps (Objects/Dictionaries)

ใน TypeScript เราสามารถกำหนดโครงสร้างของ Object (คล้าย Map ใน Dart) ได้หลายวิธี โดยวิธีที่ง่ายที่สุดคือการใช้ Literal Object Type หรือใช้ Interface/Type Alias (ซึ่งเป็นหัวข้อในเชิงลึก)

// Literal Object Type
let address: { [key: string]: string | string[] } = {
    'city': ['Bangkok', 'Nonthaburi'], // key เป็น string, value เป็น string[]
    'country': 'Thailand'              // key เป็น string, value เป็น string
};

console.log(address['country']); // การเข้าถึงข้อมูลด้วย Key

// การใช้ Map Class (สำหรับ Key ที่ซับซ้อนกว่า string)
let userAges: Map<string, number> = new Map();
userAges.set('Ebiwayo', 24);
console.log(userAges.get('Ebiwayo')); // 24