เหตุใดฉันจึงสามารถเข้าถึงสมาชิกส่วนตัวของ TypeScript ในเมื่อฉันไม่สามารถทำได้

ฉันกำลังดูการใช้งานสมาชิกส่วนตัวใน TypeScript และฉันพบว่ามันสับสนเล็กน้อย Intellisense ไม่อนุญาตให้เข้าถึงสมาชิกส่วนตัว แต่ใน JavaScript บริสุทธิ์ทุกอย่างอยู่ที่นั่น ทำให้ฉันคิดว่า TS ไม่ได้ใช้สมาชิกส่วนตัวอย่างถูกต้อง ความคิดใด ๆ ?

class Test{
  private member: any = "private member";
}
alert(new Test().member);

เช่นเดียวกับการตรวจสอบประเภทความเป็นส่วนตัวของสมาชิกจะถูกบังคับใช้ภายในคอมไพเลอร์เท่านั้น

ทรัพย์สินส่วนตัวถูกนำไปใช้เป็นคุณสมบัติทั่วไปและรหัสภายนอกชั้นเรียนไม่ได้รับอนุญาตให้เข้าถึง

ในการทำให้สิ่งที่เป็นส่วนตัวอย่างแท้จริงภายในคลาสนั้นไม่สามารถเป็นสมาชิกของคลาสได้มันจะเป็นตัวแปรท้องถิ่นที่สร้างขึ้นภายในขอบเขตฟังก์ชันภายในโค้ดที่สร้างอ็อบเจกต์ นั่นหมายความว่าคุณไม่สามารถเข้าถึงได้เหมือนสมาชิกในคลาสนั่นคือการใช้thisคีย์เวิร์ด

JavaScript รองรับตัวแปรส่วนตัว

function MyClass() {
    var myPrivateVar = 3;

    this.doSomething = function() {
        return myPrivateVar++;        
    }
}

ใน TypeScript สิ่งนี้จะแสดงออกดังนี้:

class MyClass {

    doSomething: () => number;

    constructor() {
        var myPrivateVar = 3;

        this.doSomething = function () {
            return myPrivateVar++;
        }
    }
}

แก้ไข

ควรใช้แนวทางนี้เฉพาะในกรณีที่จำเป็นอย่างยิ่งเท่านั้น ตัวอย่างเช่นหากคุณต้องการแคชรหัสผ่านชั่วคราว

รูปแบบนี้มีค่าใช้จ่ายด้านประสิทธิภาพ (ไม่เกี่ยวข้องกับ Javascript หรือ typescript) และควรใช้เฉพาะในกรณีที่จำเป็นจริงๆเท่านั้น

เมื่อการสนับสนุนสำหรับWeakMapที่ใช้ได้อย่างกว้างขวางมีเทคนิคที่น่าสนใจรายละเอียดในตัวอย่าง # 3 ที่นี่

อนุญาตให้ใช้ข้อมูลส่วนตัวและหลีกเลี่ยงค่าใช้จ่ายด้านประสิทธิภาพของตัวอย่าง Jason Evans โดยอนุญาตให้เข้าถึงข้อมูลได้จากวิธีการต้นแบบแทนที่จะเป็นวิธีการอินสแตนซ์เท่านั้น

หน้า MDN WeakMap ที่เชื่อมโยงแสดงการรองรับเบราว์เซอร์ที่ Chrome 36, Firefox 6.0, IE 11, Opera 23 และ Safari 7.1

let _counter = new WeakMap();
let _action = new WeakMap();
class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  decrement() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}

ตั้งแต่ typescript 3.8 จะได้รับการปล่อยตัวออกมาคุณจะสามารถที่จะประกาศข้อมูลส่วนตัวซึ่ง ไม่สามารถเข้าถึงหรือภายนอกตรวจพบแม้กระทั่งของชั้นที่มี

class Person {
    #name: string

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

    greet() {
        console.log(`Hello, my name is ${this.#name}!`);
    }
}

let jeremy = new Person("Jeremy Bearimy");

jeremy.#name
//     ~~~~~
// Property '#name' is not accessible outside class 'Person'
// because it has a private identifier.

ฟิลด์ส่วนตัวเริ่มต้นด้วย#อักขระ

โปรดทราบว่าฟิลด์ส่วนตัวเหล่านี้จะแตกต่างจากฟิลด์ที่มีprivateคำหลัก

อ้างอิง https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/

ขอบคุณ Sean Feldman สำหรับลิงก์ไปยังการสนทนาอย่างเป็นทางการเกี่ยวกับปัญหานี้ - ดูคำตอบของเขาสำหรับลิงก์

ฉันอ่านการสนทนาที่เขาเชื่อมโยงและนี่คือสรุปประเด็นสำคัญ:

• คำแนะนำ:คุณสมบัติส่วนตัวในตัวสร้าง
  • ปัญหา:ไม่สามารถเข้าถึงจากฟังก์ชันต้นแบบ
• คำแนะนำ:วิธีการส่วนตัวในตัวสร้าง
  • ปัญหา:เช่นเดียวกับคุณสมบัติและคุณสูญเสียประโยชน์ด้านประสิทธิภาพในการสร้างฟังก์ชันหนึ่งครั้งต่อคลาสในต้นแบบ แทนที่จะสร้างสำเนาของฟังก์ชันสำหรับแต่ละอินสแตนซ์
• คำแนะนำ:เพิ่มสำเร็จรูปในการเข้าถึงคุณสมบัตินามธรรมและบังคับใช้การมองเห็น
  • ปัญหา:ค่าใช้จ่ายด้านประสิทธิภาพที่สำคัญ TypeScript ออกแบบมาสำหรับแอปพลิเคชันขนาดใหญ่
• คำแนะนำ: TypeScript ได้รวมตัวสร้างและนิยามเมธอดต้นแบบไว้แล้วในการปิด ใส่วิธีการและคุณสมบัติส่วนตัวไว้ที่นั่น
  • ปัญหาเกี่ยวกับการใส่คุณสมบัติส่วนตัวในการปิดนั้นพวกมันกลายเป็นตัวแปรคงที่ ไม่มีหนึ่งรายการต่ออินสแตนซ์
  • ปัญหาเกี่ยวกับการใส่เมธอดส่วนตัวในการปิดนั้น:พวกเขาไม่สามารถเข้าถึงได้thisหากไม่มีวิธีแก้ปัญหาบางอย่าง
• คำแนะนำ:ทำลายชื่อตัวแปรส่วนตัวโดยอัตโนมัติ
  • อาร์กิวเมนต์ตอบโต้:นั่นเป็นหลักการตั้งชื่อไม่ใช่โครงสร้างภาษา ยุ่งเหยิงด้วยตัวคุณเอง
• คำแนะนำ:ใส่คำอธิบายประกอบเมธอดส่วนตัวด้วยตัว@privateย่อที่รับรู้ว่าคำอธิบายประกอบสามารถย่อชื่อเมธอดได้อย่างมีประสิทธิภาพ
  • ไม่มีข้อโต้แย้งที่สำคัญสำหรับข้อโต้แย้งนี้

อาร์กิวเมนต์โดยรวมเพื่อเพิ่มการสนับสนุนการมองเห็นในโค้ดที่ปล่อยออกมา:

• ปัญหาคือ JavaScript เองไม่มีตัวปรับการมองเห็น - นี่ไม่ใช่ปัญหาของ TypeScript
• มีรูปแบบที่กำหนดไว้แล้วในชุมชน JavaScript: คำนำหน้าคุณสมบัติส่วนตัวและวิธีการที่มีขีดล่างซึ่งระบุว่า "ดำเนินการด้วยความเสี่ยงของคุณเอง"
• เมื่อนักออกแบบ TypeScript กล่าวว่าคุณสมบัติและวิธีการส่วนตัวอย่างแท้จริงไม่ "เป็นไปได้" นั่นหมายความว่า "เป็นไปไม่ได้ภายใต้ข้อ จำกัด ในการออกแบบของเรา" โดยเฉพาะ:
  • JS ที่ปล่อยออกมาเป็นสำนวน
  • หม้อไอน้ำมีน้อย
  • ไม่มีค่าใช้จ่ายเพิ่มเติมเมื่อเทียบกับ JS OOP ปกติ

ในฟังก์ชัน TypeScript Private สามารถเข้าถึงได้ภายในคลาสเท่านั้น ชอบ

และจะแสดงข้อผิดพลาดเมื่อคุณพยายามเข้าถึงสมาชิกส่วนตัว นี่คือตัวอย่าง:

หมายเหตุ: ใช้จาวาสคริปต์ได้ดีและทั้งสองฟังก์ชันสามารถเข้าถึงได้จากภายนอก

ฉันตระหนักดีว่านี่เป็นการสนทนาที่เก่ากว่า แต่การแบ่งปันวิธีแก้ปัญหาของฉันเกี่ยวกับตัวแปรและวิธีการส่วนตัวที่คาดคะเนใน TypeScript "รั่ว" ในอินเทอร์เฟซสาธารณะของคลาส JavaScript ที่คอมไพล์แล้วอาจเป็นประโยชน์

สำหรับฉันแล้วปัญหานี้เป็นเรื่องเครื่องสำอางเท่านั้นกล่าวคือทั้งหมดเกี่ยวกับความยุ่งเหยิงของภาพเมื่อมีการดูตัวแปรอินสแตนซ์ใน DevTools การแก้ไขของฉันคือการจัดกลุ่มการประกาศส่วนตัวเข้าด้วยกันภายในคลาสอื่นที่ถูกสร้างอินสแตนซ์ในคลาสหลักและกำหนดให้privateกับตัวแปร (แต่ยังคงมองเห็นได้แบบสาธารณะใน JS) ด้วยชื่อเช่น__(ขีดล่างคู่)

ตัวอย่าง:

class Privates {
    readonly DEFAULT_MULTIPLIER = 2;
    foo: number;
    bar: number;

    someMethod = (multiplier: number = this.DEFAULT_MULTIPLIER) => {
        return multiplier * (this.foo + this.bar);
    }

    private _class: MyClass;

    constructor(_class: MyClass) {
        this._class = _class;
    }
}

export class MyClass {
    private __: Privates = new Privates(this);

    constructor(foo: number, bar: number, baz: number) {
        // assign private property values...
        this.__.foo = foo;
        this.__.bar = bar;

        // assign public property values...
        this.baz = baz;
    }

    baz: number;

    print = () => {
        console.log(`foo=${this.__.foo}, bar=${this.__.bar}`);
        console.log(`someMethod returns ${this.__.someMethod()}`);
    }
}

let myClass = new MyClass(1, 2, 3);

เมื่อmyClassดูอินสแตนซ์ใน DevTools แทนที่จะเห็นสมาชิก "ส่วนตัว" ทั้งหมดผสมกับสมาชิกสาธารณะอย่างแท้จริง (ซึ่งอาจดูยุ่งเหยิงอย่างมากในโค้ดชีวิตจริงที่ปรับโครงสร้างใหม่อย่างเหมาะสม) คุณจะเห็นพวกมันถูกจัดกลุ่มอย่างเรียบร้อยภายใน__คุณสมบัติที่ยุบ:

ต่อไปนี้เป็นแนวทางที่ใช้ซ้ำได้สำหรับการเพิ่มคุณสมบัติส่วนตัวที่เหมาะสม:

/**
 * Implements proper private properties.
 */
export class Private<K extends object, V> {

    private propMap = new WeakMap<K, V>();

    get(obj: K): V {
        return this.propMap.get(obj)!;
    }

    set(obj: K, val: V) {
        this.propMap.set(obj, val);
    }
}

สมมติว่าคุณมีชั้นเรียนClientที่ต้องการคุณสมบัติส่วนตัวสองอย่าง:

• prop1: string
• prop2: number

ด้านล่างนี้คือวิธีการใช้งาน:

// our private properties:
interface ClientPrivate {
    prop1: string;
    prop2: number;
}

// private properties for all Client instances:
const pp = new Private<Client, ClientPrivate>();

class Client {
    constructor() {
        pp.set(this, {
            prop1: 'hello',
            prop2: 123
        });
    }

    someMethod() {
        const privateProps = pp.get(this);

        const prop1 = privateProps.prop1;
        const prop2 = privateProps.prop2;
    }
}

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

เป็นที่น่าสังเกตว่าส่วนใหญ่แล้วชั้นเรียนPrivateจะเสนอลายเซ็นที่อ่านได้อย่างสวยงามในขณะที่WeakMapไม่ใช้โดยตรง