在IIFE中创建Vue组件方法时,如何在TypeScript中保留此属性?
请参见以下示例:在IIFE中创建Vue组件方法时,如何在TypeScript中保留此属性?,typescript,vue.js,Typescript,Vue.js,请参见以下示例: import Vue from 'vue'; Vue.extend({ data() { return { name: 'Amy', }; }, methods: { hello() { return this.name; // TypeScript knows it's string }, hello2: (function() { // This is a IIFE ret
import Vue from 'vue';
Vue.extend({
data() {
return {
name: 'Amy',
};
},
methods: {
hello() {
return this.name; // TypeScript knows it's string
},
hello2: (function() {
// This is a IIFE
return function() {
return this.name; // TypeScript doesn't know this right now
};
})(),
},
});
离题:我正在为Vue组件创建一个工厂模式
为了做到这一点,我需要为方法附加生命,我简化了
像上面这样的例子
我怎样才能让TypeScript知道这段生活的意义
更新:
做这些事情的目的是因为我想创建一个mixin实用程序,它可以配置为去公告或不去公告,以鼠标位置mixin为例
import Vue from 'vue';
import debounce from 'lodash/debounce';
type mixinMousePositionAtPageType = {
debounce?: {
enable: boolean;
wait?: number;
options?: Parameters<typeof debounce>[2];
};
};
const mixinMousePositionAtPage = (options: mixinMousePositionAtPageType) =>
Vue.extend({
data() {
return {
mixinMousePositionAtPage: {
x: 0,
y: 0,
},
};
},
mounted() {
window.addEventListener('mousemove', this.__updateMousePagePosition);
},
destroyed() {
window.removeEventListener('mousemove', this.__updateMousePagePosition);
},
methods: {
__debouncedUpdateMousePagePosition(event: MouseEvent) {
this.mixinMousePositionAtPage.x = event.pageX;
this.mixinMousePositionAtPage.y = event.pageY;
},
__updateMousePagePosition: (function() {
if (options.debounce && options.debounce.enable) {
return debounce(
this.__debouncedUpdateMousePagePosition, // this yells
options.debounce.wait,
options.debounce.options
);
}
return this.__debouncedUpdateMousePagePosition;
})(),
},
});
export { mixinMousePositionAtPage };
从“Vue”导入Vue;
从“lodash/脱盎司”进口脱盎司;
类型MixinMousePositionPageType={
脱盎司?:{
启用:布尔;
等待?:号码;
选项?:参数[2];
};
};
常量MixinMousePositionPage=(选项:MixinMousePositionPageType)=>
Vue.extend({
数据(){
返回{
MixinMousePositionPage:{
x:0,,
y:0,
},
};
},
安装的(){
window.addEventListener('mousemove',this.\u updateMousePagePosition);
},
销毁(){
window.removeEventListener('mousemove',this.\u updateMousePagePosition);
},
方法:{
__debouncedUpdateMousePagePosition(事件:MouseEvent){
this.mixinMousePositionPage.x=event.pageX;
this.mixinMousePositionPage.y=event.pageY;
},
__updateMousePagePosition:(函数(){
if(options.debounce&&options.debounce.enable){
返回去盎司(
这个。uuu debouncedUpdateMousePagePosition,//这个叫
options.debounce.wait,
options.debounce.options
);
}
返回此项。uu取消公告UpdateMousePagePosition;
})(),
},
});
导出{MixinMousePositionPage};
这是否回答了您的问题?实际上,你的例子比你可能需要的要复杂得多。为了保留这一点,您需要提取调用外部的对象,以便可以通过变量名引用它。只是为了让生活顺利。也许最好以某种方式避免这种生活。我不知道你想用生命来解决什么,所以我不知道最好的方法去除它,然后仍然得到解决方案。感觉像是.TypeScript不知道它,因为这将是错误的。它不是指封闭的对象,而是指全局对象或未定义的对象(取决于代码是否为严格模式)。这种生活的目的是什么?正如所建议的,您可能有XY问题。我已经包括了我的实际使用情况。