ES6 - 如何声明隐式 class 成员？

Question

如果 class 成员由某些选项创建，如何声明它们？

class cls {

    constructor(options) {

        Object.assign(this, {
            arr: [],
        }, options);

        this.arr[0] = 1; // <- IDE thinks that arr is an unresolved variable
    }
}

Answer 1

如果您使用的是 Babel，则可以改用 class property：

class cls {
    arr = []
    constructor(options) {
        Object.assign(this, options);
        this.arr[0] = 1;
    }
}

Answer 2

只是不要使用 Object.assign 创建具有默认值的属性。写入

class cls {
    constructor(options) {
        this.arr = [];
        Object.assign(this, options);
        this.arr[0] = 1; // should work now
    }
}

Answer 3

为了让 class 属性未明确定义为被 IDE (Jetbrains PhpStorm/WebStorm) 识别，可以使用 JSDoc 指定一个成员:

class cls {
    /**
     @name cls#arr
     @type Array
     */

    constructor(options) {...}
}

由于属性与 Object.assign 的分配不提供额外的好处，更自然的方法是在 this 上显式定义属性（如其他答案提及）。

在 ES6 中：

class cls {
   constructor(options) {
        this.arr = [];

        Object.assign(this, options);

        this.arr[0] = 1;
    }
}

在 ES.next 和 class field proposal 中，需要在 Babel 中预设阶段 3（或更低）：

class cls {
   arr = [];

   constructor(options) {
        Object.assign(this, options);

        this.arr[0] = 1;
    }
}

Class 字段在构造函数主体之前计算，ES.next 选项是 ES6 选项的语法糖。这两个选项相同并被 IDE.

识别

ES6 - 如何声明隐式 class 成员？

ES6 - How to declare implicit class member?

javascript

jsdoc

phpstorm

ecmascript-6