打字稿访问修饰符和 javascript 访问修饰符有什么区别？使用打字稿时我应该更喜欢哪一个？ 支持访问级别支持访问级别

如何解决打字稿访问修饰符和 javascript 访问修饰符有什么区别？使用打字稿时我应该更喜欢哪一个？ 支持访问级别支持访问级别

Typescript 提供了 public、protected 和 private 关键字来定义成员或在它们旁边声明的方法的可见性，但是，我知道由于 ES6 Javascript 允许使用为类成员或方法添加前缀“#”以获得相同的结果。

为了更好地理解幕后的工作原理，我在 Typescript 中编写了一个玩具类，只是为了看看它是如何在 javascript 中编译的：

class aClass
{
    #jsPrivate: number;
    get jsPrivate()
        { return this.#jsPrivate};

    private tsPrivate: number;
    protected tsProtected: number;
    public tsPublic: number;

    constructor( a: number,b: number,c: number,d: number)
    {
        this.#jsPrivate = a;
        this.tsPrivate = b;
        this.tsProtected = c;
        this.tsPublic = d;
    }
}

console.log(new aClass(1,2,3,4));

使用 tsc --target es6 和 Typescript 版本 4.3.5 编译后变成：

var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver,state,value,kind,f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver,value) : f ? f.value = value : state.set(receiver,value)),value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver,f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _aClass_jsPrivate;
class aClass {
    constructor(a,b,c,d) {
        _aClass_jsPrivate.set(this,void 0);
        __classPrivateFieldSet(this,_aClass_jsPrivate,a,"f");
        this.tsPrivate = b;
        this.tsProtected = c;
        this.tsPublic = d;
    }
    get jsPrivate() { return __classPrivateFieldGet(this,"f"); }
    ;
}
_aClass_jsPrivate = new WeakMap();
console.log(new aClass(1,4));

我不确定我是否做对了，但我注意到 js 样式的私有成员现在在全局范围内，而且使用 typescript 修饰符声明的成员现在都是公共的，尽管理论上任何尝试访问编译为 javascript 时应该捕获私有成员，我不确定这对代码安全性来说是最好的。

对于修改会员可见性的最佳方式，您有什么建议吗？

您能否也向我解释一下为什么会有这些差异？

解决方法

JavaScript 私有字段语法 #

支持

这还不是官方的。语法包含在 the latest upcoming draft of the specifications 中。但是，ES2021 specification (ES12) 没有它。所以现在正处于成为正式版的过渡状态。

与此同时，并非所有浏览器都支持私有字段。最值得注意的是 Firefox 版本 89（在撰写本文时，浏览器的当前版本）不支持它。即将推出的 90 版将添加对私有字段的支持，但目前处于 Beta 版。

访问级别

私有字段语法只允许隐藏一个字段。 JavaScript 中没有保护访问的概念（仅对类的后代可见）。所以对于类外的任何代码，一个字段要么对任何人可见，要么不可见。中间没有。

此外，JavaScript 中的私有字段完全隐藏。没有官方机制可以从外部以编程方式提取它们并与之交互。只有声明它的类才能使用它们。

class Foo {
  #id;
  constructor(num)   { this.#id = num; }
  viewPrivate(other) { return other.#id; }
}

class Bar {
  #id;
  constructor(num) { this.#id = num; }
}

const foo1 = new Foo(1);
const foo2 = new Foo(2);

console.log(foo1.viewPrivate(foo1)); //1
console.log(foo1.viewPrivate(foo2)); //2

const bar = new Bar(3);
console.log(foo1.viewPrivate(bar)); //Error 
                                    // cannot access #x from different class

TypeScript 访问修饰符

支持

在技术上到处都支持 TypeScript 访问修饰符。这是因为 TypeScript 代码被转换为纯 JavaScript。编译器可以配置目标 ES 版本。

与类型系统的其他部分一样，访问修饰符将在编译时被剥离。如果您尝试访问您不应该访问的字段，则会出现编译错误。

访问级别

最大的区别是支持protected访问级别，允许子类访问字段：

class Foo {
    public    a = 1;
    protected b = 2;
    private   c = 3;
}

class Bar extends Foo {
    doStuff(): number {
        return this.a + //OK - it's public
               this.b + //OK - it's protected and Bar extends Foo
               this.c;  //Error - it's private
    }
}

Playground Link

---

与普通 JavaScript 相比的另一个重大区别是 TypeScript 访问修饰符可以在子类中更改以减少限制：

class A {
    protected x = "hello";
}

class B extends A {
    public x = "world";
}

console.log(new A().x); // Compilation error
console.log(new B().x); // OK

Playground Link

---

最后，我必须加倍强调不同 JavaScript 的私有字段与 TypeScript 的 private 访问修饰符有何不同。 TypeScript 不会“隐藏”字段。它会阻止您引用它们。这些字段仍然存在并且可以通过代码正常访问。甚至可以防止编译错误：

class Foo {
    private secret = "top secret";
}

const foo = new Foo();

console.log(JSON.stringify(foo)); //"{"secret":"top secret"}" 
console.log((foo as any).secret); //"top secret" 

Playground Link

JavaScript 中的私有字段语法不会发生这种情况。同样，私有字段对外部完全隐藏。

使用哪个

这取决于选择。如果编写面向 OOP 的 TypeScript 代码，您可能只想坚持使用 private、protected、public 关键字。他们在类层次结构中表现得更好。

话虽如此，如果您想要更强大的封装且不会泄漏，JavaScript 中的私有字段语法 # 可以非常强大。

您也可以混合使用两种类型的封装。

归根结底，这将是个案的基础。

,

前缀“#”的使用是相当新的并且没有正式可用。如果您使用它，浏览器兼容性也可能是一个问题。因此，我建议您暂时使用 typescript 的类型，因为它很稳定，并且可以自行处理跨浏览器支持。 此外，到目前为止，您在 JS 中还没有受保护的访问修饰符。