Mengapa saya dapat mengakses anggota pribadi TypeScript ketika saya seharusnya tidak bisa?

Saya melihat implementasi anggota pribadi di TypeScript, dan saya merasa agak membingungkan. Intellisense tidak mengizinkan untuk mengakses anggota pribadi, tetapi dalam JavaScript murni, semuanya ada di sana. Ini membuat saya berpikir bahwa TS tidak mengimplementasikan anggota privat dengan benar. Ada pemikiran?

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

Seperti halnya pemeriksaan tipe, privasi anggota hanya diterapkan di dalam kompilator.

Properti pribadi diimplementasikan sebagai properti biasa, dan kode di luar kelas tidak diizinkan untuk mengaksesnya.

Untuk membuat sesuatu yang benar-benar pribadi di dalam kelas, itu tidak bisa menjadi anggota kelas, itu akan menjadi variabel lokal yang dibuat di dalam ruang lingkup fungsi di dalam kode yang membuat objek. Itu berarti Anda tidak dapat mengaksesnya seperti anggota kelas, misalnya menggunakan thiskata kunci.

JavaScript mendukung variabel privat.

function MyClass() {
    var myPrivateVar = 3;

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

Dalam TypeScript ini akan diekspresikan seperti ini:

class MyClass {

    doSomething: () => number;

    constructor() {
        var myPrivateVar = 3;

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

EDIT

Pendekatan ini sebaiknya hanya digunakan SEPENUHNYA jika benar-benar dibutuhkan. Misalnya jika Anda perlu menyimpan sandi sementara.

Ada biaya kinerja untuk menggunakan pola ini (tidak relevan dengan Javascript atau Typecript) dan sebaiknya hanya digunakan jika benar-benar diperlukan.

Setelah dukungan untuk WeakMap tersedia lebih luas, ada teknik menarik yang dirinci dalam contoh # 3 di sini .

Ini memungkinkan data pribadi DAN menghindari biaya kinerja contoh Jason Evans dengan memungkinkan data dapat diakses dari metode prototipe alih-alih hanya metode contoh.

Halaman WeakMap MDN yang ditautkan mencantumkan dukungan browser di Chrome 36, Firefox 6.0, IE 11, Opera 23, dan 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)();
    }
  }
}

Karena TypeScript 3.8 akan dirilis, Anda akan dapat mendeklarasikan bidang pribadi yang tidak dapat diakses atau bahkan dideteksi di luar kelas yang memuatnya .

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.

Bidang pribadi dimulai dengan #karakter

Harap dicatat bahwa bidang pribadi ini akan menjadi sesuatu yang berbeda dari bidang yang ditandai dengan privatekata kunci

Ref. https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/

Terima kasih kepada Sean Feldman untuk tautan ke diskusi resmi tentang masalah ini - lihat jawabannya untuk tautannya.

Saya membaca diskusi yang ditautkannya, dan inilah ringkasan dari poin-poin utamanya:

• Saran: properti pribadi dalam konstruktor
  • masalah: tidak dapat mengakses dari fungsi prototipe
• Saran: metode pribadi dalam konstruktor
  • masalah: sama seperti properti, ditambah Anda kehilangan manfaat performa dari pembuatan fungsi satu kali per kelas dalam prototipe; alih-alih Anda membuat salinan fungsi untuk setiap instance
• Saran: tambahkan boilerplate ke akses properti abstrak dan terapkan visibilitas
  • masalah: overhead kinerja utama; TypeScript dirancang untuk aplikasi besar
• Saran: TypeScript sudah membungkus definisi metode konstruktor dan prototipe dalam sebuah closure; letakkan metode dan properti pribadi di sana
  • masalah dengan menempatkan properti privat di closure itu: mereka menjadi variabel statis; tidak ada satu pun per contoh
  • masalah dengan menempatkan metode privat dalam penutupan itu: mereka tidak memiliki akses thistanpa semacam solusi
• Saran: secara otomatis mengacaukan nama variabel privat
  • argumen lawan: itu adalah konvensi penamaan, bukan konstruksi bahasa. Hancurkan sendiri
• Saran:@private Beri anotasi pada metode privat dengan begitu minifier yang mengenali bahwa anotasi dapat mengecilkan nama metode secara efektif
  • Tidak ada argumen tandingan yang signifikan untuk yang satu ini

Argumen balasan keseluruhan untuk menambahkan dukungan visibilitas dalam kode yang dipancarkan:

• masalahnya adalah JavaScript itu sendiri tidak memiliki pengubah visibilitas - ini bukan masalah TypeScript
• sudah ada pola yang mapan dalam komunitas JavaScript: awali properti pribadi dan metode dengan garis bawah, yang bertuliskan "lanjutkan dengan risiko Anda sendiri"
• ketika desainer TypeScript mengatakan bahwa properti dan metode yang benar-benar pribadi tidak "mungkin", itu berarti "tidak mungkin di bawah batasan desain kami", khususnya:
  • JS yang dipancarkan bersifat idiomatik
  • Boilerplate minimal
  • Tidak ada biaya tambahan dibandingkan dengan JS OOP biasa

Dalam TypeScript Private, fungsi hanya dapat diakses di dalam kelas. Suka

Dan itu akan menunjukkan kesalahan ketika Anda mencoba mengakses anggota pribadi. Berikut contohnya:

Catatan: Ini akan baik-baik saja dengan javascript dan kedua fungsi dapat diakses dari luar.

Saya menyadari ini adalah diskusi yang lebih lama tetapi mungkin masih berguna untuk membagikan solusi saya untuk masalah variabel dan metode yang seharusnya pribadi dalam TypeScript "bocor" ke antarmuka publik dari kelas JavaScript yang dikompilasi.

Bagi saya, masalah ini murni kosmetik, yaitu semua tentang kekacauan visual saat variabel instance dilihat di DevTools. Perbaikan saya adalah mengelompokkan deklarasi pribadi bersama-sama di dalam kelas lain yang kemudian dipakai di kelas utama dan ditugaskan ke privatevariabel (tapi masih terlihat secara publik di JS) dengan nama seperti __(garis bawah ganda).

Contoh:

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);

Saat myClassinstance dilihat di DevTools, alih-alih melihat semua anggota "pribadi" bercampur dengan yang benar-benar publik (yang bisa menjadi sangat berantakan secara visual dalam kode kehidupan nyata yang difaktor ulang dengan benar) Anda melihatnya dikelompokkan dengan rapi di dalam __properti yang diciutkan :

Berikut pendekatan yang dapat digunakan kembali untuk menambahkan properti pribadi yang tepat:

/**
 * 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);
    }
}

Katakanlah Anda memiliki kelas di Clientsuatu tempat yang membutuhkan dua properti pribadi:

• prop1: string
• prop2: number

Di bawah ini adalah bagaimana Anda menerapkannya:

// 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;
    }
}

Dan jika yang Anda butuhkan hanyalah satu properti pribadi, maka itu menjadi lebih sederhana, karena Anda tidak perlu mendefinisikannya ClientPrivatedalam kasus itu.

Perlu dicatat, bahwa untuk sebagian besar, kelas Privatehanya menawarkan tanda tangan yang dapat dibaca dengan baik, sedangkan penggunaan langsung WeakMaptidak.