木头的博客

我是木头 有些想法 有点精力

0%

TypeScript 进阶:Class 中的动态类型参数

前段时间听说 Vue3.x 要使用 TypeScript 重构了, 本来一直都想研究一下 Vue 的源码, 这次带着夙愿来从头编写一个简单的、现代化的 Vue.

搭建好 TypeScript 开发环境后, 开始了一段 TypeScript 与 Vue 源码的探索之旅.

背景

我使用 ES6 class 创建了一个 Vue 类, 为了实现数据监听, 我使用了 ES2015 中的 proxy 方法来对数据进行封装,
并且将这个 proxy 返回给类的构造方法, 以便于获取 vm 实例.

代码如下

查看源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
interface IOptions {
data: () => Record<string, any>
}

class Vue {
private $options: IOptions = {
data: () => ({})
}

constructor(options: IOptions) {
this.$options = options
const proxy = this.initProxy()
return proxy
}

initProxy() {
const data = this.$options.data ? this.$options.data() : {}

return new Proxy(this, {
set(_, key: string, value) {
data[key] = value
return true
},
get(_, key: string) {
return data[key]
}
})
}
}

const vm = new Vue({
data() {
return {
a: 1
}
}
})

vm.a = 2
// ^ Property 'a' does not exist on type 'Vue'.

console.log(vm.a) // => 2
// ^ Property 'a' does not exist on type 'Vue'.
在线版本