简单的 Vue 类型
题目
实现类似 Vue 的类型支持的简化版本。
通过提供一个函数SimpleVue
(类似于Vue.extend
或defineComponent
),它应该正确地推断出 computed 和 methods 内部的this
类型。
在此挑战中,我们假设SimpleVue
接受只带有data
,computed
和methods
字段的 Object 作为其唯一的参数,
data
是一个简单的函数,它返回一个提供上下文this
的对象,但是你无法在data
中获取其他的计算属性或方法。computed
是将this
作为上下文的函数的对象,进行一些计算并返回结果。在上下文中应暴露计算出的值而不是函数。methods
是函数的对象,其上下文也为this
。函数中可以访问data
,computed
以及其他methods
中的暴露的字段。computed
与methods
的不同之处在于methods
在上下文中按原样暴露为函数。
SimpleVue
的返回值类型可以是任意的。
ts
const instance = SimpleVue({
data() {
return {
firstname: "Type",
lastname: "Challenges",
amount: 10,
};
},
computed: {
fullname() {
return this.firstname + " " + this.lastname;
},
},
methods: {
hi() {
alert(this.fullname.toLowerCase());
},
},
});
精选
ts
type Computed<C extends Record<string, any>> = {
[P in keyof C]: ReturnType<C[P]>;
};
declare function SimpleVue<D, C extends Record<string, any>, M>(options: {
data(this: {}): D;
computed: C & ThisType<D & Computed<C> & M>;
methods: M & ThisType<D & Computed<C> & M>;
}): D & Computed<C> & M;