ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้


การใช้งาน Static Property และ Static Method ในภาษา TypeScript เบื้องต้น

บทความ เมื่อไม่กี่สัปดาห์ โดย Ninenik Narkdee
typescript

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ typescript

ดูแล้ว 100 ครั้ง


ใน TypeScript สมาชิกที่กำหนดด้วยคีย์เวิร์ด static จะผูกอยู่กับ Class โดยตรง ไม่ใช่กับ Object ที่สร้างจาก Class นั้น (Instance Object) ดังนั้น Static Member จึงทำหน้าที่เป็น Shared Member ที่ทุก Instance ของ Class สามารถเข้าถึงได้ผ่านชื่อ Class เท่านั้น

 

1. Static Method (เมธอดระดับ Class)

 

Static Method คือฟังก์ชันที่ใช้คีย์เวิร์ด static กำกับไว้ด้านหน้า ซึ่งสามารถเรียกใช้งานได้โดยตรงผ่านชื่อ Class โดยไม่ต้องสร้าง Object ก่อน

 

A. การประกาศและการเรียกใช้

 

Static Method มักใช้สำหรับฟังก์ชันที่เป็น Utility หรือเครื่องมือที่ไม่ได้ขึ้นอยู่กับสถานะ (State) ของ Object ใด ๆ

TypeScript
class Calculator {
    // Static Method: ใช้ในการเปรียบเทียบราคาของ Object สองตัว
    // โดยที่ method นี้ไม่จำเป็นต้องใช้ข้อมูลภายใน instance
    static comparePrice(car1: { price: number }, car2: { price: number }): number {
        return car1.price - car2.price;
    }
}

class Car {
    color: string;
    price: number;

    constructor(color: string, price: number) {
        this.color = color;
        this.price = price;
    }
}

const car1 = new Car('red', 2000);
const car2 = new Car('blue', 1500);

// ต้องเรียกใช้งานผ่านชื่อ Class (Calculator) เท่านั้น
const priceDiff = Calculator.comparePrice(car1, car2);

console.log(`Price difference: ${priceDiff}`); // Output: 500

// const calc = new Calculator(); 
// calc.comparePrice(car1, car2); // Error: Cannot access static method via instance

 

2. Static Property (คุณสมบัติระดับ Class)

 

Static Property คือตัวแปรที่ใช้คีย์เวิร์ด static กำกับไว้ ทำให้ตัวแปรนั้นเป็นตัวแปรที่ ใช้ร่วมกัน สำหรับ Class นั้น ๆ และมีสำเนาเพียงชุดเดียวในหน่วยความจำ

 

A. การประกาศและการเรียกใช้

 

Static Property มักใช้สำหรับกำหนดค่า Constant หรือค่าคงที่ที่เกี่ยวข้องกับ Class นั้น

TypeScript
class Circle {
    radius: number; // Instance Property (แต่ละ Object มีค่าต่างกัน)
    
    // Static Property: ค่า PI เป็นค่าเดียวกันสำหรับทุกวงกลม
    static PI: number = 3.14159; 
    
    // Static Readonly Property: ค่าคงที่ที่แก้ไขไม่ได้
    static readonly MAX_RADIUS = 100;

    constructor(radius: number) {
        this.radius = radius;
        // this.MAX_RADIUS = 50; // Error: ไม่สามารถกำหนดค่าให้ static member ภายใน constructor ได้
    }

    getArea(): number {
        // สามารถเรียกใช้ Static Property ภายใน Instance Method ได้
        return Circle.PI * (this.radius * this.radius); 
    }
}

console.log(`Global PI: ${Circle.PI}`); // Output: 3.14159
// Circle.MAX_RADIUS = 500; // Error: Cannot assign to 'MAX_RADIUS' because it is a read-only property.

 

3. กฎการเข้าถึง Static vs. Instance

 

กฎการเข้าถึงสมาชิกภายใน Class ใน TypeScript เป็นไปตามหลักการ OOP ทั่วไป ดังนี้:

จากภายใน... สามารถเข้าถึง... ตัวอย่างการใช้งาน
Static Method Static Property และ Static Method เท่านั้น static methodA() { return ClassName.staticProp; }
Instance Method Static และ Instance Members ทั้งหมด instanceMethod() { return this.instanceProp + ClassName.staticProp; }

ตัวอย่างกฎการเข้าถึง:

TypeScript
class Report {
    // Instance Property
    private instanceCount: number = 0; 

    // Static Property
    static totalReports: number = 0;

    constructor() {
        this.instanceCount++;
        Report.totalReports++; // Instance สามารถเพิ่มค่า Static ได้
    }
    
    // Instance Method
    public getInfo(): string {
        // สามารถเข้าถึง Static ได้
        return `Instance: ${this.instanceCount}, Total: ${Report.totalReports}`;
    }

    // Static Method
    static clearReports(): void {
        // Report.instanceCount = 0; // Error: Static method cannot access instance property
        Report.totalReports = 0; // ทำได้
        console.log("Total reports cleared.");
    }
}

Report.clearReports(); // เรียกใช้ Static Method
const r1 = new Report();
r1.getInfo();


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง



Tags:: typescript







URL สำหรับอ้างอิง










เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ