TypeScript 之参数属性

前言

最近在阅读 vue3 的源码，众所周知 vue3 就是使用 ts 编写的，在读到 effect 的源码的时候，有一个地方的代码一开始让我一脸懵逼，先来看看源代码：

在 packages\reactivity\src\effect.ts 这个文件里面有一个 ReactiveEffect 类，他在初始化的构造函数是这样的：

ts 复制代码

  constructor(
    public fn: () => T,
    public scheduler: EffectScheduler | null = null,
    scope?: EffectScope
  ) {
    recordEffectScope(this, scope)
  }

然后对应的，初始化的逻辑是

ts 复制代码

export function effect<T = any>(
  fn: () => T,
  options?: ReactiveEffectOptions
): ReactiveEffectRunner {
  ...
  const _effect = new ReactiveEffect(fn)
  ...
}

可以看到初始化的时候只传入了一个 fn 参数，并且在构造函数里面没有任何的赋值操作，压根没有引用，但是在后面其他函数的触发过程中，this 对象上的 fn 却莫名其妙的有了赋值，而且就是我们传入的这个 fn

当时断点到这的时候就让我百思不得其解，明明没有进行赋值，这个fn的内容是怎么来的？这里就可以引出 ts 在类里面的一个特性参数属性（Parameter Properties）

参数属性（Parameter Properties）

在官方的文档中是这样介绍这个特性的：

TypeScript offers special syntax for turning a constructor parameter into a class property with the same name and value. These are called parameter properties and are created by prefixing a constructor argument with one of the visibility modifiers public, private, protected, or readonly.

翻译过来就是 TypeScript提供了特殊的语法，我们可以将构造函数的参数转为相同名称和值的类属性，通过在构造函数参数前添加可见性修饰符（public 、 private 、 protected 或 readonly）就可以实现。

我们来模拟一下 vue3 源码中的例子

ts 复制代码

class ReactiveEffect {
  constructor(
    public fn: () => any
  ) {
  }
}

const a = new ReactiveEffect(()=>{const a = 111})

console.log(a.fn) // [LOG]: () => { const a = 111; }

可以看到fn这个属性确实成功的赋值了，这也就解决了上面的疑惑。

结语

本文主要是记录在vue3源码的学习过程中碰到的小知识点，用这篇文章做一个总结

引用

TypeScript: Documentation - Classes

TypeScript 之 参数属性

前言

参数属性（Parameter Properties）

结语

引用

TypeScript 之参数属性