如何使用Object.assign(this,{foo,bar})并让VSCode Intellisense自动完成th



我有一个类看起来像这样:

class MyClass {
constructor({foo,bar}) {
Object.assign(this,{foo,bar})
}
}

我想当我键入this.f时,VSCode自动完成this.foo。我知道如果我做这个

class MyClass {
constructor({foo,bar}) {
this.foo = foo
this.bar = bar
}
}

它会给我想要的,但我更喜欢使用Object.assign()。我很难找到合适的JSDoc或其他可以使用的东西。在类的顶部添加@prop {String} foo或其他内容不会有任何作用。

从VS代码1.18开始,我们不支持Object.assign(this)的intellisense。正在此处跟踪此错误

由于VSC在后台使用TypeScript来提供IntelliSense,因此有一个折衷的解决方案:如果您不介意一些重复,请使用@thisJSDoc标记。

您必须将类型定义为构造函数类型和为构造函数分配的对象类型的交集,和/或在类上定义的任何字段,您需要为其添加thisIntelliSense:

/**
* @typedef {{
*   foo: string;
*   bar: string;
* }} MyAdditions
*/
class MyClass {
/**
* @param {MyAdditions} options
* @this {MyClass & MyAdditions}
*/
constructor({ foo, bar }) {
Object.assign(this, { foo, bar });
// all ok
this.foo;
this.bar;
}
/**
* @this {MyClass & MyAdditions}
*/
doSomethingWithMyAdditions() {
const { foo, bar } = this; // all ok too
console.log(`${foo}${bar}`);
}
}

但是,需要注意的是,它引用了类实例中的属性。不幸的是,重写构造函数的this类型不会更改其返回类型(在上面的示例中,返回类型仍然是MyClass),因此这仍然是非法的:

const c = new MyClass({ foo: "bar", bar: "foo" });
c.foo; //Property 'foo' does not exist on type 'MyClass'
c.bar; //Property 'bar' does not exist on type 'MyClass'

聪明到足以尝试将CCD_ 10标记添加到构造函数的cookie将被TS1903错误"迎接;类型注释不能出现在构造函数声明中;。使用@type注释(即@type {new () => MyClass & MyAdditions})作为替代方案只会导致否定。

也就是说,没有什么可以阻止您使用@type注释(注意new周围的括号)强制转换实例类型(毕竟,实例化不应该经常发生):

const d = /** @type {MyClass & MyAdditions} */ (new MyClass({ foo: "bar", bar: "foo" }));
d.foo; // ok now
d.bar; // ok now

游乐场

无论如何,这只是一种变通方法,原始问题仍在积压工作中。

最新更新